短视频系统源码,点开图片双指放大或双击放大实现的相关代码
v-viewer是一个图片放大预览,他可以鼠标滚轮放大和缩小,也可以全屏,上一张下一张
安装
npm install v-viewer --save
main.js引入
import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer)
如果你不想显示按钮和图片名称的话,你可以在main.js
Vue.use(Viewer, { defaultOptions: { button: false, navbar: false, title: false, toolbar: true, } })
使用方法一
<viewer :images="photo"> //photo 一定要一个数组,否则报错 <img :src="row.avatar"> </viewer>
使用方法二
<div class="tabBox_img" v-viewer> <img v-lazy="row.avatar" /> </div>
方法
methods: { inited (viewer) { this.$viewer = viewer this.$viewer.index = this.activeIndex // 不要他的按钮 this.$viewer.options.button = false // 不要他的底部缩略图 this.$viewer.options.navbar = false // 不要他的底部标题 this.$viewer.options.title = false // 不要他的底部工具栏 this.$viewer.options.toolbar = false this.show() }, // 调用显示 show () { this.$viewer.show() }, }
以上就是 短视频系统源码,点开图片双指放大或双击放大实现的相关代码,更多内容欢迎关注之后的文章