专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > JavaScript > 正文

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

作者:鹏仔先生日期:2020-06-03浏览:1602分类:JavaScript


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

首先,我们运行命令安装

npm install vue-directive-image-previewer --save

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

接着我们在 main.js 中引入

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

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

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

<img v-image-preview src="@/assets/img/1.jpg"/>

自行给加默认样式,这样一个点击放大效果就实现了


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯