vue 移動端圖片預覽的方法使用總結

方法一：使用插件vue-image-swipe預覽，使用方法如下：

首先npm i 安裝 vue-image-swipe，然後在入口文件use

import VueImageSwipe from 'vue-image-swipe'
import 'vue-image-swipe/dist/vue-image-swipe.css'
Vue.use (VueImageSwipe);

<div v-for="(item,index) in environmentalList" :key="index+'item'"
     @click="previeewEnv(index)"
>
    <img :src="item"/>
</div>

previeewEnv (index) {
    this.$imagePreview ({
        images: this.environmentalList,
        index: index,
        defaultOpt: {
            fullscreenEl: false,
            arrowEl: true,
            preloaderEl: true,
            bgOpacity: 0.85,
            showHideOpacity: true
        }
    })
},

效果如下：

 

 

方法二：使用v-viewer插件預覽

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use (Viewer, {
    defaultOptions: {
        'navbar': true,
        'toolbar': false,
        'movable': false,
        'title': false,
        'zoomable': true,
        'scalable': true,
        'transition': true
    }
})

<viewer :images="imgList" class="imgWrapper">
    <div v-for="(item,index) in imgList" :key="index+'item'"
    >
        <img :src="item"/>
    </div>
</viewer>

預覽效果如下：

具體配置文件可參考

 

 

交流
可添加qq羣共同進階學習： 進軍全棧工程師疑難解  羣號:   856402057

對前端技術保持學習愛好者。我會經常分享自己所學所看的乾貨，在進階的路上，共勉！歡迎關注公衆號共同學習。