Vue 实现图片旋转与切换组件

该资源提供了一个使用Vue.js实现的简易图片查看组件案例，该组件能够实现图片的左右旋转、上一张和下一张切换功能，并且可以嵌入到Element UI环境中。父组件通过传递属性`filesLists`和`file`来控制显示的图片，而子组件则包含了具体的图片展示和操作逻辑。 在Vue.js中，组件是可复用的代码块，这个案例中涉及到的组件分为父组件和子组件两部分： 1. 父组件： - 使用`<template>`标签定义了HTML结构，其中包含了一个`<see-attachment>`子组件。 - `v-if`指令用于控制组件的显示和隐藏，这里的`showmask`变量决定了子组件是否显示。 - 通过`:filesLists`和`:file`绑定属性将数据传递给子组件，分别代表图片列表和当前选中的图片对象。 - `@hideMask`监听事件用于处理子组件发送的隐藏请求，更新`showmask`的值。 2. 父组件脚本： - `data`方法返回一个对象，包含`showmask`（初始值为`false`）和`imgFile`（初始值为一个空对象），它们分别用于控制组件的显示和存储当前图片信息。 - `components`对象导入并注册了子组件`seeAttachment`。 - `methods`对象定义了`lookImg`方法，当调用时会设置`showmask`为`true`并传入图片对象，显示图片查看器。 3. 子组件： - 子组件模板中，`<div class="proview_box">`是图片预览区域，点击时触发`hideMask`方法。 - `<div class="img_box">`内包含`<img>`元素，展示了图片，其宽度和高度可以通过`:width`和`:height`进行绑定，点击事件`@click="stopEvent"`阻止事件冒泡。 - 子组件的底部有四个操作按钮，分别通过`@click`事件绑定到`prevOne`（上一张）、`rotate(0)`（左旋转）、`rotate(1)`（右旋转）和`nextOne`（下一张）方法。 4. 子组件脚本： - `export default`导出一个Vue组件，`name`属性定义了组件的名称为`seeAttachment`。 - 子组件中可能还包含了处理图片旋转和切换的逻辑，例如`prevOne`、`rotate`和`nextOne`方法，但具体内容未在提供的代码中给出。 这个案例适合初学者了解Vue.js组件化开发以及父子组件间的通信。通过这个案例，你可以学习到如何创建自定义组件、如何传递数据以及如何通过事件处理来实现组件间的交互。同时，还可以学习到如何在Vue组件中处理图片操作，如旋转和切换。