需求:在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) => {