vue点击图片放大功能
1、安装配置
npm install v-viewer --save
2、main.js引用
复制代码
1
2
3
4
5
6
7
8
9
10import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' //Vue.use(Viewer) 默认配置写法 Vue.use(Viewer, { defaultOptions: { zIndex: 9999 } })
3、页面使用
复制代码
1
2
3
4
5
6
7
8
9
10
11
12<!-- 图片循环展示 --> <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点击图片放大功能内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复