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

好的，以下是一个简单的自定义指令实现点击图片放大的功能：

Vue.directive('enlarge', {
  bind: function (el) {
    el.addEventListener('click', function () {
      el.style.transform = 'scale(2)';
      el.style.transition = 'all 0.3s ease';
    });
    el.addEventListener('mouseleave', function () {
      el.style.transform = 'scale(1)';
    });
  }
});

使用方法：

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

这个指令会在图片被点击时将图片放大为原来的两倍，并且添加了一个过渡效果，鼠标移开时则会恢复原样。需要注意的是，这只是一个简单的实现，还有很多优化的空间，比如支持缩放倍数的自定义配置、在图片边缘时不能继续放大等问题都需要进一步处理。

相关问题

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等。

vux 显示 html,vux: v-html里的图片放大

v-html指令是用来渲染包含 HTML 代码的字符串的，它只是将字符串中的 HTML 代码渲染出来，而不会对其中的图片进行处理。如果你想要实现图片放大的功能，可以考虑使用第三方的图片放大插件，比如vue-image-viewer或者vue-picture-preview等插件。这些插件可以很方便地实现图片的预览、放大等功能，你可以在需要的地方使用它们来实现你的需求。当然，也可以通过编写自定义指令的方式来实现图片放大的功能，不过这需要一定的 Vue.js 开发经验。