使用Element-Plus实现的Vue.js图片预览自定义指令

`import type { DirectiveBinding } from "vue"; import { ElImageViewer } from "element-plus"; import { Directive, h, render } from "vue";

const previewImage: Directive = { mounted(el: HTMLElement, binding: DirectiveBinding) { console.log(binding.value, "123"); const previewBox = document.createElement("div"); // 创建节点 previewBox.classList.add("preview-box"); // 给 div 增加类名 let vnode; let clicked = false;

const onClick = () => {
  el.style.cursor = "pointer";
  clicked = true;
  el.removeEventListener("click", onClick); // Remove the click event listener after it's triggered once
};

el.addEventListener("click", onClick);

vnode = h(ElImageViewer, {
  urlList: [binding.value], // 图片地址
  hideOnClickModal: true, // 允许点击遮罩层关闭
  onClose: () => {
    if (clicked) {
      el.removeEventListener("click", onClick); // Remove the click event listener if the image preview was opened
    }
    document.body.removeChild(previewBox);
  },
});

el.addEventListener("click", () => {
  if (clicked) {
    render(vnode, previewBox); // 将 vnode 渲染成 html
    document.body.appendChild(previewBox); // 将 html 插入到 body 标签里面
  }
});

}, };

export default previewImage; ` 用法很简单，只需要相应的Dom使用指令绑定上图片地址 即可点击预览图片