关于在vue中用elementui中el-popover和el-Tooltip组件解析带回车换行字符的html字符串问题

本文链接：https://blog.csdn.net/q644639554/article/details/108496713

elementUI官网给的简单实例是

<el-popover
    placement="top-start"
    title="标题"
    width="200"
    trigger="hover"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
    <el-button slot="reference">hover 激活</el-button>
  </el-popover>

在这里插入图片描述
当我们需要动态绑定一个字符串内容的时候，就应该写成:content=“str”。（str是你需要渲染的字符串变量）

<el-popover
    placement="left"
    title="填写说明"
    width="200"
    trigger="hover"
    :content="str">
    <el-button slot="reference" circle type="info" icon="el-icon-warning-outline">
    </el-button>
  </el-popover>

这里问题来了，一般和后台交互，接口取到的是带↵的字符串，这样的字符串，直接通过:content="str"解析出来，↵就会变成空格
在这里插入图片描述

但是我们其实是希望它能正确的换行处理，这时，我们就需要将后台返回的字符串中的↵替换为br标签

str = str.replace(/\n/g,"<br/>");

这样，我们就得到了一个html字符串，当然，html字符串也不能直接用:content=“str”，因为不能正常解析

有些不方便展示的信息打了码
这时我们需要通过VUE的 v-html 功能来解析html字符串

<div v-html="str"></div>

而el-popover和el-Tooltip组件的源码中可以看到，预留了一个slot来展示content
在这里插入图片描述
所以，我们最终直接写成这样就可以了，即不写:content=“str”，直接用一个div v-html="str"代替

<el-popover
        placement="left"
        title="填写说明"
        width="400"
        trigger="hover">
  <div v-html="str"></div>
  <el-button slot="reference" circle type="info" icon="el-icon-warning-outline">
  </el-button>
</el-popover>