概述
vue点击图片放大功能
1、安装配置
npm install v-viewer --save
2、main.js引用
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
//Vue.use(Viewer) 默认配置写法
Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999
}
})
3、页面使用
<!-- 图片循环展示 -->
<div class="screen-se">
<viewer :imglist="imglist" class="screen-view">
<img class="screen-img" :src="item" v-for="(item,index ) in imglist" :key="index">
</viewer>
</div>
imglist在data里面定义数组
图片的数据很简单：
'/test/test.png'
最后
以上就是多情咖啡豆为你收集整理的vue点击图片放大功能的全部内容，希望文章能够帮你解决vue点击图片放大功能所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复