点击富文本中的图片放大
时间：2023-03-28 14:01:11
HTML
点击富文本中的图片放大，通过element-UI中的图片预览可以看到大图
从“element-ui/packages/image/src/image-viewer”导入ElImageViewer导出默认{组件：{ElImageViewer}，数据（）{返回{demoHtml：'
',url:'',dialogVisible:false}},methods:{showImage(e){if(e.target.tagName=='IMG'){控制台。log(e.target.src)this.url=e.target.srcthis.dialogVisible=true}},closeImage(){this.dialogVisible=falsethis.url=''}}}通过给富文本框添加点击事件，通过e.target.tagName获取src地址获取点击是否为img元素，在弹框显示大图。通过在element-UI中引入ElImageViewer，实现大图显示。这个组件没有暴露在element-ui中。需要在页面中引入才可以使用。另一种方式richImg(txt){//txt引用接口返回的富文本//主要代码letimgarr=[];让regex=newRegExp(/|\/>)/gi);//匹配所有图片letsrcReg=/src=[\'\"]?([^\'\"]*)[\'\"]?/i;//匹配src图片letarrsImg=txt.match(regex);for(leti=0;i
