使用el-popover时，内容和content为富文本框时

最新推荐文章于 2024-06-12 08:00:00 发布

沙雕JavaScripter

最新推荐文章于 2024-06-12 08:00:00 发布

阅读量1.1k

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/TianGuaJSTec/article/details/125388450

版权

本文探讨了在Vue中如何使用Element UI的el-popover和el-tooltip组件，当内容为富文本时，如何正确设置v-html属性以实现hover和直接显示的效果。重点讲解了两种组件在处理HTML字符串时的技巧和注意事项。

摘要由CSDN通过智能技术生成

使用el-popover时，内容和content为富文本框时：

//text为富文本内容，即富文本的字符串
<el-popover :placement="placement"
            :trigger="trigger"
             title="xxx"
             :visible-arrow="arrow"
             :disabled="disabled"
             popper-class="popper">
      <span v-html="text"></span> //这个为hover效果显示的内容
      <span slot="reference" v-html="text"></span>//这个为直接显示的内容
</el-popover>

使用el-tooltip时，内容和content为富文本框时：

<el-tooltip placement="right" effect="light">
        <div slot="content" v-html="scope.row.content"></div>
        <span v-html="scope.row.content"></span>
</el-tooltip>