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>

预览效果如下：

具体配置文件可参考

 交流

1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解  群：  856402057

2、公众号：公众号「进军全栈攻城狮」 ，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！