vue 移动端图片预览的方法使用总结
方法一: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'"...
·
方法一:使用插件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、公众号:公众号「进军全栈攻城狮」 ,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!
更多推荐
已为社区贡献11条内容
所有评论(0)