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