在vue中使用viewer插件的图片放大父子组件传递效果

1，安装v-viewer插件

npm install v-viewer --save

2，在main.js文件内引入v-viewer

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
Vue.use(Viewer)

3. 使用v-viewer插件实现图片的预览功能
   在子组件给一个点击事件

// 点击放大图
    clickEvent() {
      if(this.item.type == "image"){
					this.$emit("on-event",{
						type : "image",
						url : this.item.url
					})
				}
    },

4，在父组件里接受信息

onEvent(e) {
      //   console.log(e);
      switch (e.type) {
        case "delete":
          this.list.splice(e.index, 1);
          this.$Message.success("删除成功");
          break;
        case "checked":
          this.list[e.index].checked = e.value;
          break;
        case "rename":
          this.rename(e.index);
          break;
        case "image":
          const viewer = this.$el.querySelector(".images").$viewer;
          //获取当前点击要预览的图片在images里面所对应的下标
          const index = this.images.findIndex((item) => {
            return item.url == e.url;
          });

          //通过传递的图片所在数组的下标,显示对应下标的图片
          viewer.view(index);
          viewer.show();
        default:
          break;
      }
    },

5，父组件中一个div显示

 <!-- 点击图片放大 -->
    <div class="images d-none" v-viewer="{ movable: false }">
      <img v-for="(item, index) in images" :src="item.url" :key="index" />
    </div>

6，计算属性的定义

 computed: {
    //当前列表里面所有type类型为image的数据
    images() {
      const urls = [];
      this.list.forEach((item, index) => {
        if (item.type == "image") {
          urls.push(item);
        }
      });
      return urls;
    },