type
status
date
slug
summary
tags
category
icon
password
近期遇到这样一个需求:点击图片即可预览该图片。这是一个很常见的需求。在笔者简单的调研下,发现市面上有比较成熟的三方库,功能也是很齐全。但由于我司也只是要最基础的功能,最终还是决定自己实现。
在vue中想要实现简单的图片预览功能,常见方法有封装成组件插件、自定义指令等。这里记录一下用自定义指令的形式实现图片预览功能。
基本原理:在目标元素上使用v-image-preview,传入图片src。指令方法内部监听点击事件,当点击目标元素时,会生成一个div容器并在容器中生成img元素并填入src,最后插入body中
以上就是最基础的图片预览功能代码,只是实现了预览功能。接下来,你可以把它创建成全局指令或者局部指令。由于项目中图片预览需求并不频繁,所以笔者并未将它创建成全局指令,而是在组件内使用局部指令的形式调用。
以上就是完整的功能代码和指令使用方法。目前该指令只实现了最基本的预览功能,未来还有很多可以优化的空间如图片预览放大、缩小、旋转等。。。
Vue3 新特性VueRouter
Loading...