element-ui使用经验——如何在el-tooltip展示自定义内容

分类:计算机 | 前端 | ElementUI | 综合 1269
更新:2021-10-18 22:16:38
编辑

1 说明

element-ui中有一个文字提示空间el-tooltip,常用于展示鼠标移动到某个控件上面的提示信息,一般来说tooltip的展示内容是文字信息,但是el-tooltip也可以展示各种自定义的html元素。

2 展示方法

<el-tooltip class="item" effect="dark" placement="top">
<div slot="content">

  <!-- 自定义内容 -->
  <span>展示浏览量最高的15篇文章</span>
  <el-rate
    value="5"
    disabled
    show-score
    text-color="#ff9900"
    score-template="5"
  >
  </el-rate>
  <!-- 自定义内容 -->

</div>
<i class="el-icon-info"></i>
</el-tooltip>

效果:

说明:我们定义了一个div的插槽"content",在这个div里面就可以自定义我们需要展示的html元素。