ElementUI中动态修改tooltip内容

Marigold

发布于 2022-06-17 13:57:45

3.5K0

发布于 2022-06-17 13:57:45

文章被收录于专栏：MarigoldMarigold

ElementUI中动态修改tooltip内容

在博客开发过程中，遇到这样一个需求：随着用户发布文章数量增多，每一类文章的数量在动态变化，需要在tooltip中动态修改文章数量，像下面这张图：

ElementUI中的Tooltip组件已经提供了自定义content的方式，通过使用具名插槽即可实现，那么我们使用Vue数据的动态绑定以及状态管理工具store即可。同时我们也可以对内容的样式进行定制，例如上图中数字的颜色和字体大小。

<el-tooltip placement="top" :enterable="false">
  <div slot="content" v-if="$store.state.categoryNumber.se">
    服务器是管理计算机资源的计算机，<br />这不学点儿服务器技术卷死他们？<br />给您准备了&nbsp;<span style="font-size: 16px; color: red">{{ $store.state.categoryNumber.se }}</span>&nbsp;篇相关文章
  </div>
  <div slot="content" v-if="$store.state.categoryNumber.se == 0">
    还没有服务器相关文章呢~<br />我们会尽快上新！<br />先看看其他的吧~
  </div>
  <div class="book" id="se">服<br />务<br />器</div>
</el-tooltip>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022/01/21 ，如有侵权请联系 cloudcommunity@tencent.com 删除

element ui