vue--点击图片放大弹窗的自定义指令（低级版）

好的，下面是一个简单的点击图片放大弹窗的自定义指令：

// 引入 Vue
import Vue from 'vue'

// 定义指令
Vue.directive('enlarge', {
  bind: function (el) {
    // 给图片元素绑定点击事件
    el.addEventListener('click', function () {
      // 创建弹窗元素
      const dialog = document.createElement('div')
      dialog.style.position = 'fixed'
      dialog.style.top = '0'
      dialog.style.left = '0'
      dialog.style.width = '100%'
      dialog.style.height = '100%'
      dialog.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'
      dialog.style.display = 'flex'
      dialog.style.justifyContent = 'center'
      dialog.style.alignItems = 'center'
      dialog.style.zIndex = '9999'

      // 创建弹窗中的图片元素
      const img = document.createElement('img')
      img.src = el.src
      img.style.maxWidth = '90%'
      img.style.maxHeight = '90%'
      img.style.borderRadius = '5px'
      img.style.boxShadow = '0px 0px 5px #666'

      // 将图片元素添加到弹窗中
      dialog.appendChild(img)

      // 将弹窗添加到body中
      document.body.appendChild(dialog)

      // 点击弹窗以外的区域关闭弹窗
      dialog.addEventListener('click', function (e) {
        if (e.target === dialog) {
          document.body.removeChild(dialog)
        }
      })
    })
  }
})

使用方法：在需要放大的图片元素上添加 v-enlarge 指令即可。

<template>
  <div>
    <img src="图片地址" v-enlarge>
  </div>
</template>

请注意，这只是一个简单的实现方式，可能存在一些问题，如图片过大时会出现滚动条等。如果需要更完善的功能，可以参考一些开源的图片查看组件，如vue-image-viewer、vue-photo-preview等。