标签：false viewer 双击 源码 options 放大

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

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()
    },
}

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

标签：false,viewer,双击,源码,options,放大
来源： https://www.cnblogs.com/yunbaomengnan/p/15959688.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。