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

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>

效果如下