通过使用vue-photo-preview插件,实现移动端图片的预览,全屏等功能。
1.安装插件
npm install vue-photo-preview --save
2.main引入
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)
3.给dom加点击事件
<div v-html="contents"
@click="showImg($event)"></div>
<img :src="previewImg"
style="display:none"
ref="previewImg"
preview="1">
showImg (e) {
if (e.target.tagName == 'IMG') {
this.previewImg = e.target.src
this.$nextTick(() => {
this.$refs.previewImg.click()
})
}
},