ElementUI的el-image大图预览里没有类似elementuiPlus调整缩放倍率的zoom-rate属性，如何实现调整缩放倍率？完美解决方案

需求：在ElementUI的el-image大图预览模式里，调整滚轮缩放的倍率。

对比elementuiPlus

在elementuiPlus的图片预览中，我们可以直接使用zoom-rate属性直接设置缩放倍率，so easy！但是，在ElementUI中翻遍文档，没有提供这个api，怎么办才能简单方便的实现需求，还不影响ElementUI其他组件呢。

实现思路

图片缩放是通过鼠标滚轮实现的，我们是否可以监听鼠标滚轮事件，重写大图预览中的缩放？好像可以！思路打开，功能就好实现了，还是废话不多说，直接上代码

1.为保障复用性和简洁性，考虑封装成插件使用

建一个新的文件 ImageZoomPlugin.js。在这个文件中，我们会定义并导出一个插件，这个插件将注册一个全局的 Vue 自定义指令或方法。

// ImageZoomPlugin.js
export default {
  install(Vue, options = { zoomRate: 1.1 }) {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.addedNodes) {
          mutation.addedNodes.forEach(node => {
            if (node.nodeType === 1 && node.classList.contains('el-image-viewer__wrapper')) {
              modifyZoomBehavior(node, options.zoomRate);
            }
          });
        }
      });
    });

    function modifyZoomBehavior(imageViewer, zoomRate) {
      const canvas = imageViewer.querySelector('.el-image-viewer__canvas');

      canvas.addEventListener('wheel', function(event) {
        event.stopPropagation(); // 停止事件冒泡
        event.preventDefault();  // 阻止默认行为
        let scale = parseFloat(canvas.style.transform.replace('scale(', '').replace(')', '')) || 1;
        if (event.deltaY < 0) {
          scale *= zoomRate;
        } else {
          scale /= zoomRate;
        }
        canvas.style.transform = `scale(${scale})`;
      }, { passive: false });
    }

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  }
}

2.使用插件

在你的主 Vue 应用文件 (通常是 main.js 或 app.js) 中，导入并使用这个插件。

// main.js
import Vue from 'vue'
import App from './App.vue'
import ImageZoomPlugin from './ImageZoomPlugin'

Vue.use(ImageZoomPlugin, { zoomRate: 1.5 }) // 你可以自定义 zoomRate

new Vue({
  render: h => h(App),
}).$mount('#app')

这样就完美实现了需求！这种方法不需要修改 element-ui 的源码，而是在其行为之上附加了新的行为，可以较容易地适应 element-ui 的版本更新。请注意，这个方法依赖于element-ui 内部的 DOM 结构，如果 element-ui 更新了相关的 DOM 结构，这个代码可能需要进行相应的调整哦。