Vue渲染富文本图片点击预览

编程入门 行业动态 更新时间:2024-10-28 12:19:33

Vue渲染富<a href=https://www.elefans.com/category/jswz/34/1771357.html style=文本图片点击预览"/>

Vue渲染富文本图片点击预览

 1.渲染富文本:

使用Vue提供的 v-html 进行富文本内容渲染

<div v-html="content" @click="imageChgange($event)"></div>

2.获取点击元素,点击图片预览

绑定点击事件,传入 $event 参数

        //ImagePreview  Vant组件库图片预览组件imageChgange(e){if (e.target.nodeName == 'IMG') {ImagePreview({images:[e.target.currentSrc],  //e.target.currentSrc  当前图片srcshowIndex:false,loop:false,})} else {return}}

 

更多推荐

Vue渲染富文本图片点击预览

本文发布于:2024-02-26 20:11:22,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1703744.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:文本   图片   Vue

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!