免费个人博客模板-专注前端行业与圈内动态-分享最具价值内容

VUE中使用插件实现点击图片放大功能

发布:鹏仔先生2019-3-6 10:42分类: JavaScript 标签: vue 大前端

今天看到vue中一个很不错的图片点击放大插件,分享给大家

首先,我们运行命令安装

npm install vue-directive-image-previewer --save
鹏仔先生

接着我们在 main.js 中引入

// 引入放大插件
import vueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(vueDirectiveImagePreviewer)
鹏仔先生

最后,我们在页面组件中写入标签,通过设置 v-image-preview 属性来实现

<img v-image-preview src="@/assets/img/1.jpg"/>
自行给加默认样式,这样一个点击放大效果就实现了,最终效果如下图

共享博客 鹏仔先生




温馨提示如有转载或引用以上内容之必要,敬请将本文链接作为出处标注,谢谢合作!

已有 0/739 人参与

微信扫码关注鹏仔哥微信