短視訊系統原始碼，點開圖片雙指放大或雙擊放大

短視訊系統原始碼，點開圖片雙指放大或雙擊放大實現的相關程式碼

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

以上就是 短視訊系統原始碼，點開圖片雙指放大或雙擊放大實現的相關程式碼，更多內容歡迎關注之後的文章