自定义指令 vue中怎么把element中的 el-image组件封装成可预览大图的指令？

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

el-image已封装成了组件，但是觉得指令更简单些，但在做的过程中有问题了

把element中的el-image组件封装成可预览大图的指令，

index.html中用 <img v-preview-image/>调用，

index.js中写全局指令

previewImage.vue中用<el-image></el-image>布局

点击index.html中的图片，直接显示大图预览

index.html

<template>
<a v-for="(pic, index) in comment.pic_info" :key="index" class="imgWrap">
  <img alt="图片" v-img-preview="{src: pic.url, imgList:imgList}" :src="pic.url" class="xnw_weibo_img wei"/>
</a>
</template>
<script>
export default {
        data() {
            return {
                imgList: [
                    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                    'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
                ]
            }
        }</script>

index.js

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

imgPreview.vue

<template>
    <div class="preview-container">
        <el-image
            style="width: 100px; height: 100px"
            :src="src"
            @click="showImgPreview"
            :preview-src-list="imgList">
        </el-image>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                // imgurl: '',
                // imgList: []
            }
        },
        props: {
            src: {
                type: String,
                required: true
            },
            imgList: {
                type: Array,
                default: () => []
            },
            el: {
                default: {}
            }
        },
        created() {
            // this.$emit('close') // 首次创建实例时触发关闭事件，避免显示预览图
        },
        mounted() {
            // this.imgurl = this.src
            this.$el.addEventListener('click', this.close) // 监听预览图点击事件，用于关闭预览图
        },
        beforeDestroy() {
            this.$el.removeEventListener('click', this.close) // 移除预览图点击事件监听器
        },
        methods: {
            showImgPreview(){
                this.$nextTick(() => {
                    console.log('dom')
                })
            },
            close() {
                // this.$emit('close') // 关闭预览图
            }
        },
        watch: {
            src(newSrc) {
                // this.$emit('close') // 当预览图的src属性变化时触发关闭事件，避免显示预览图
            }
        }
    }
</script>
<style scoped>
    .preview-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .preview-image {
        max-width: 90%;
        max-height: 90%;
    }</style>

这样的效果是点击图片时，直接弹出了图1
图一
自定义指令 vue中怎么把element中的 el-image组件封装成可预览大图的指令？
点中间的小图出现图2
图二