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

下面是一个简单的Vue自定义指令，用于在单击图片时显示一个弹窗来放大图片：

Vue.directive('enlarge', {
  bind: function(el) {
    el.addEventListener('click', function() {
      // 创建一个新的div来显示放大的图片
      var zoomedImg = document.createElement('div');
      zoomedImg.style.position = 'fixed';
      zoomedImg.style.top = '0';
      zoomedImg.style.bottom = '0';
      zoomedImg.style.left = '0';
      zoomedImg.style.right = '0';
      zoomedImg.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
      zoomedImg.style.display = 'flex';
      zoomedImg.style.justifyContent = 'center';
      zoomedImg.style.alignItems = 'center';

      // 创建一个新的img元素来显示放大的图片
      var img = document.createElement('img');
      img.src = el.src;
      img.style.maxHeight = '80%';
      img.style.maxWidth = '80%';

      // 将img元素添加到zoomedImg中
      zoomedImg.appendChild(img);

      // 将zoomedImg添加到body中
      document.body.appendChild(zoomedImg);

      // 单击zoomedImg时，关闭弹窗
      zoomedImg.addEventListener('click', function() {
        document.body.removeChild(zoomedImg);
      });
    });
  }
});

在HTML中使用该指令：

<img src="image.jpg" v-enlarge>

这将在单击该图片时显示一个弹窗来放大图片。