Java教程

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

本文主要是介绍短视频系统源码,点开图片双指放大或双击放大,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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

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

 

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

 

这篇关于短视频系统源码,点开图片双指放大或双击放大的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!