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>

效果如下
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐