vue el-image 怎么封装成可以预览大图的全局指令？？

Z时代
2024-02-07
分类：IT

代码如下，指令v-preview可以正常调用了但是el-image却无法调出来，出不来正常的效果，寻大神指点

html调用指令

<div class="wb_add_img clearfix">
  <a v-for="(pic, index) in picList" :key="index" v-preview="{srcList: srcList}" class="imgWrap">
       <img alt="图片" :src="pic.fileid" class="img"/>
  </a></div>

index.js

import preview from './children/preview'
Vue.directive('preview', {
    bind(el, binding, vnode) {
        const srcList = (binding.value && binding.value.srcList) || []
        el.addEventListener('click', () => {
            const $preview = new (Vue.extend(preview))({
                propsData: {
                    srcList: srcList
                }
            }).$mount()
            document.body.appendChild($preview.$el)
        })
    }})

preview.js

<template>
    <div class="perImage">
        <el-image
            style="width: 100px; height: 100px"
            ref="preview"
            class="wqewe"
            :src="url"
            :preview-src-list="srcList"
        </el-image>
    </div>
</template>
<script>
    export default {
        props: {
            srcList: [Array, String],
        },
        data() {
            return {
                url: '/wp-content/uploads/new2024/02/20240204vue1234/4a731a90594a4af544c0c25941171jpeg1934.jpeg',
                // picList: [
                //     '/wp-content/uploads/new2024/02/20240204vue1234/f01c15bb73e1ef3793e64e6b7bbccjpeg1935.jpeg',
                //     '/wp-content/uploads/new2024/02/20240204vue1234/aeffeb4de74e2fde4bd74fc7b4486jpeg1936.jpeg'
                // ]
            }
        },
        created() {
            this.init()
        },
        methods: {
            init() {
                this.$nextTick(() => {
                    this.showImgPreview()
                })
            },
            showImgPreview() {
                console.log('url', this.url)
                console.log('srcList', this.srcList)
            },
        },
        computed: {
            // 处理预览图片数据
            // previewSrc() {
                // return this.srcList
            // }
        },
    }
</script>
<style lang="scss" scoped>
    .preview-container {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.8);
    }
    .preview-container img {
        max-width: 80%;
        max-height: 80%;
    }</style>

回答：

v-preview="{srcList: srcList}"里面的srcList是否组件创建时还是个空数组，创建之后通过请求拿到的数据
我看你的指令没有 watch 这个数据，所以你这个指令好像只能渲染出来一个传入空数组的el-image，不知道是不是这个原因

试了下你的代码，发现了几个报错

preview 指令应该触发了关键字，可以考虑换个名字
还有下一段代码不对呀

<el-image
  style="width: 100px; height: 100px"
  ref="preview"
  class="wqewe"
  :src="url"
  :preview-src-list="srcList"
</el-image>
// 应该是
<el-image
  style="width: 100px; height: 100px"
  ref="preview"
  class="wqewe"
  :src="url"
  :preview-src-list="srcList"
></el-image>

这样改完我这边是生效了

参考代码

<template>
<div class="wb_add_img clearfix">
  <a v-for="(pic, index) in picList" :key="index" v-xx="{srcList: srcList}" class="imgWrap">
      <img alt="图片" :src="pic.fileid" width="100" class="img"/>
  </a>
</div>
</template>
<script>
import preview from './demo'
import Vue from 'vue'
export default {
  data () {
    return {
      srcList: [
  '/wp-content/uploads/new2024/02/20240204vue1234/f01c15bb73e1ef3793e64e6b7bbccjpeg1935.jpeg',       '/wp-content/uploads/new2024/02/20240204vue1234/aeffeb4de74e2fde4bd74fc7b4486jpeg1936.jpeg'
      ],
      picList: [
        {
          fileid: '/wp-content/uploads/new2024/02/20240204vue1234/f01c15bb73e1ef3793e64e6b7bbccjpeg1935.jpeg'
        },
        { fileid: '/wp-content/uploads/new2024/02/20240204vue1234/aeffeb4de74e2fde4bd74fc7b4486jpeg1936.jpeg' }
      ]
    }
  },
  directives: {
    xx: {
      bind (el, binding, vnode) {
        const srcList = (binding.value && binding.value.srcList) || []
        el.addEventListener('click', () => {
            const $preview = new (Vue.extend(preview))({
                propsData: {
                    srcList: srcList
                }
            }).$mount()
            document.body.appendChild($preview.$el)
        })
      }
    }
  }
}</script>

demo.vue

<template>
  <div class="perImage">
    <el-image
      style="width: 100px; height: 100px"
      ref="preview"
      class="wqewe"
      :src="url"
      :preview-src-list="srcList"
    />
  </div>
</template>
<script>
// import { Image } from 'element-ui'
export default {
  props: {
    srcList: [Array, String],
  },
  components: {
    // ElImage: Image
  },
  data () {
    return {
      url: '/wp-content/uploads/new2024/02/20240204vue1234/4a731a90594a4af544c0c25941171jpeg1934.jpeg',
      // picList: [
      //     '/wp-content/uploads/new2024/02/20240204vue1234/f01c15bb73e1ef3793e64e6b7bbccjpeg1935.jpeg',
      //     '/wp-content/uploads/new2024/02/20240204vue1234/aeffeb4de74e2fde4bd74fc7b4486jpeg1936.jpeg'
      // ]
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.$nextTick(() => {
        this.showImgPreview()
      })
    },
    showImgPreview () {
      console.log('url', this.url)
      console.log('srcList', this.srcList)
    },
  },
  computed: {
    // 处理预览图片数据
    // previewSrc() {
    // return this.srcList
    // }
  },
}
</script>
<style lang="scss" scoped>
.preview-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
}
.preview-container img {
  max-width: 80%;
  max-height: 80%;
}</style>