短视频系统源码，点开图片双指放大或双击放大

短视频系统源码，点开图片双指放大或双击放大实现的相关代码

v-viewer是一个图片放大预览，他可以鼠标滚轮放大和缩小，也可以全屏，上一张下一张

安装

1	npm install v-viewer --save

​main.js引入

1	<br>import Viewer from 'v-viewer'<br>import 'viewerjs/dist/viewer.css'<br>Vue.use(Viewer)

如果你不想显示按钮和图片名称的话，你可以在main.js

 

1	<br>Vue.use(Viewer, {<br>    defaultOptions: {<br>        button: false,<br>        navbar: false,<br>        title: false,<br>        toolbar: true,<br>    }<br>})

使用方法一

 

1	<br><viewer :images="photo"> <br>    //photo 一定要一个数组，否则报错<br>    <img :src="row.avatar"><br></viewer>

使用方法二

 

1	<br><div class="tabBox_img" v-viewer><br><img v-lazy="row.avatar" /><br></div>

方法

 

1

<br>methods: {<br>    inited (viewer) {<br>    this.$viewer = viewer<br>    this.$viewer.index = this.activeIndex<br>    // 不要他的按钮<br>    this.$viewer.options.button = false<br>    // 不要他的底部缩略图<br>    this.$viewer.options.navbar = false<br>    // 不要他的底部标题<br>    this.$viewer.options.title = false<br>    // 不要他的底部工具栏<br>    this.$viewer.options.toolbar = false<br>    this.show()<br>    },<br>    // 调用显示<br>    show () {<br>    this.$viewer.show()<br>    },<br>}

 

以上就是 短视频系统源码，点开图片双指放大或双击放大实现的相关代码，更多内容欢迎关注之后的文章