vue h5端实现富文本图片预览(基于 Vant 的 ImagePreview 组件)
vue h5端实现富文本图片预览(基于 Vant 的 ImagePreview 组件)
·
h5 页⾯展⽰从后台接受的富⽂本信息(图⽚预览) vant
main.js引入
import{ImagePreview}from'vant';
Vue.use(ImagePreview);
Vue.prototype.$ImagePreview = ImagePreview
我在项目中使用的是函数调用方式,所以要定义一个实例
Vue.prototype.$ImagePreview = ImagePreview
或者你在用到的页面单独导入
import { ImagePreview } from 'vant';
否则死活报错:ImagePreview is not defined
报错原因
你在vue页面中直接调用ImagePreview,那么你vue页面中和全局都没有这个函数,可不就报错了吗。
ImagePreview是一个函数,他不是一个组件,所以不能用Vue.use(ImagePreview);
的方式去挂载,你需要Vue.prototype.ImagePreview = ImagePreview
,这样在组件中再以this.ImagePreview
的方式调用,或者把ImagePreview挂载到window上。
html代码
<div v-html="htmlString"></div>
富文本数据
//模拟接口返回的数据
let htmlString = `
<p class="p1">
<img src="img/1.png">
<span>我是帅哥</span>
<img src="img/2.png">
</p>`;
效果图
这里需要点击屏幕上的每张图片,点击后将只预览点击图片
一、给div设置点击事件,传一个$event
<div v-html="htmlString" @click="imageChgange($event)"></div>
二、获取e.target.currentSrc路径
打印出e看一下是什么
我们就从e里面获取富文本中的路径也就是 e.target.currentSrc (获取当前点击后的图片路径)
methods:{
imageChgange(e) {
console.log(e);
console.log(e.target.currentSrc);
if (e.target.nodeName == "IMG") {
ImagePreview({
images: [e.target.currentSrc], //e.target.currentSrc 当前图片src
closeable: true,
showIndex: false,
loop: true,
closeOnPopstate: true
});
} else {
return;
}
},
}
最终效果图
到此结束
更多推荐
已为社区贡献10条内容
所有评论(0)