图片预览由w-previewimg实现
1、拷贝w-previewing源代码。
2、在components文件夹下创建previewimg目录
3、将一下两个文件加入进去：
创建index.js
/**
* Created by ty on 18/2/1.
*/
import wpreviewImg from './previewImg.vue'
export default wpreviewImg;
创建previewimg.vue
<template>
<transition name="fade">
<div v-if="show" class="zhezhao">
<div style="width:100%;height:100%;position:relative;" @touchstart="startChange" @touchend="changeImg">
<img :src="current" alt="" style="max-width: 100%;
max-height: 70%;
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;">
</div>
<!-- <div style="width:20px;height:20px;position:absolute;top:15px;right:15px;color:#FFF;border-radius:100%;background-color:rgba(255,255,255,.2);text-align:center;line-height:18px;cursor:pointer">
x
</div> -->
</div>
</transition>
</template>
<script>
export default {
props: {
imgs: {
type: Array
},
currentImg: {
default: '',
type: String
},
show: {
default: false,
type: Boolean
}
},
data () {
return {
current: '',
currentX: '',
currentIndex: ''
}
},
watch: {
currentImg (val) {
this.current = this.currentImg
this.getIndex(val)
}
},
mounted () {
},
methods: {
startChange (e) {
this.currentX = e.changedTouches[0].clientX
},
changeImg (e) {
let distance = e.changedTouches[0].clientX - this.currentX
if (-10< distance && distance <10) {
this.$emit('close')
} else if (distance < -50) {
this.swipeLeft()
} else {
this.swipeRight()
}
},
getIndex (url) {
for (let i = 0,len = this.imgs.length;i < len;i ++) {
if (this.imgs[i] == url) {
this.currentIndex = i
break
}
}
},
swipeLeft () {
if (this.currentIndex != (this.imgs.length - 1)) {
this.currentIndex++
} else {
this.currentIndex = 0
}
this.current = this.imgs[this.currentIndex]
},
swipeRight () {
if (this.currentIndex == 0) {
this.currentIndex = this.imgs.length - 1
} else {
this.currentIndex--
}
this.current = this.imgs[this.currentIndex]
},
}
}
</script>
<style scoped>
.zhezhao {
position: fixed;
top:0;
bottom: 0;
left:0;
right: 0;
background-color: #000;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
4、在页面中引入
5、使用
6、属性以及方法：
总结：可以使用npm install w-previewing --save，为什么还要下载源码，自己封装呢。因为模块下载的preview不能实现自己封装，如果产品有修改需求，我们可以在previewimg.vue文件中修改对应的样式。
