vue 自定义指令封装点击事件并插入DOM元素节点,并传参

最新推荐文章于 2024-07-03 17:18:15 发布

周家大小姐.

最新推荐文章于 2024-07-03 17:18:15 发布

阅读量1.4k

点赞数 1

分类专栏： element vue2.0

本文链接：https://blog.csdn.net/qq_40190624/article/details/119106725

版权

vue2.0 同时被 2 个专栏收录

271 篇文章 4 订阅

订阅专栏

element

94 篇文章 7 订阅

订阅专栏

需求:点击小图出现查看大图
这是在element上进行修改
在这里插入图片描述

html中使用v-click-preview-img指令

 <el-image v-click-preview-img="{ licensePlate: item.licensePlate ,times: item.times,srcList: item.srcList }" class="imag" v-if="item.imgUrl" :src="item.imgUrl" :preview-src-list="item.srcList">
 </el-image>

自定义指定

/*
 * @Author: your name
 * @Date: 2021-07-26 10:26:19
 * @LastEditTime: 2021-07-26 11:57:13
 * @LastEditors: Please set LastEditors
 * @Description: 查看大图指令
 * @FilePath: \vue-ui\src\directive\previewImg\index.js
 */
import Vue from 'vue'
export default Vue.directive('clickPreviewImg', {
    bind: function(el, binding) {
        el.onclick = event => {
            event.stopPropagation()
            const { licensePlate, times, srcList } = binding.value
            const viewerCanvas = document.getElementsByClassName(
                'el-image-viewer__canvas'
            )[0]
            // 判断有class并有大图
            if (viewerCanvas && srcList.length > 0) {
                viewerCanvas.style = 'position: relative'
                setTimeout(() => {
                    const viewImg = viewerCanvas.getElementsByClassName(
                        'el-image-viewer__img'
                    )[0]
                    const left = viewImg.getBoundingClientRect().left
                    const top =
                        viewImg.getBoundingClientRect().top > 60
                            ? viewImg.getBoundingClientRect().top - 60
                            : viewImg.getBoundingClientRect().top
                    const box = document.createElement('div')
                    box.setAttribute(
                        'style',
                        `position:absolute;top:${top}px;z-index: 100;color: #ccc;left: ${left}px;line-height: 26px;font-size: 18px;`
                    )
                    box.innerHTML = `<div style='font-weight: bold;'>${licensePlate}</div><div>${times}</div>`
                    viewerCanvas.insertBefore(box, viewerCanvas.childNodes[0])
                }, 100)
            }
        }
    },
    unbind(el, binding) {
        // 解除事件监听
        delete binding.rawName
    }
})