Element 利用Tooltip提示框实现动态显示文字提示

最新推荐文章于 2024-02-26 17:46:19 发布

叫我火柴

最新推荐文章于 2024-02-26 17:46:19 发布

阅读量9.6k

点赞数 2

分类专栏： vue 文章标签： html vue.js html5 css javascript

本文链接：https://blog.csdn.net/weixin_44283571/article/details/108847456

版权

vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何借助Element UI的Tooltip组件，在Vue.js应用中动态显示循环数据的提示信息。当循环出的数据显示长度超过10个字符时，Tooltip会自动显示详细内容。示例代码包括HTML和JavaScript部分，通过设置`disabled`属性控制Tooltip的显示与否。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用element的提示框来实现动态显示循环的数据，效果图如下：
在这里插入图片描述

在这里插入图片描述

这里的四个项都是通过循环数组来展示出来的，需要用Tooltip提示框将代码包裹起来就可以达到此效果，代码如下：
HTML:

<div v-for="(item,index) in choice" :key="index" class="equipmentname center2">
              <i class="el-icon-circle-close" style="margin:0 10px 0 10px;color:#009cde"  />
              <el-tooltip :disabled="item.length <= 10" class="item" placement="top">
                <div slot="content">{{ item }}</div>
                <div class="showname">{{ item }}</div>
              </el-tooltip>
            </div>

其中:disabled="item.length <= 10"这段代码是用于控制是否显示提示框的，在这里的用处是当循环出来的数据长度大于10时，就显示提示框，不然就不显示

JS:

data() {
    return {
      choice: [{
        date: '闭式单点快速压力机'
      }, {
        date: '油漆喷涂废气处理'
      }, {
        date: '芯体半自动装配机'

      }, {
        date: '水空自动扣压干试验检测线 (403-314)'

      }, {
        date: '剪切机器人'

      }, {
        date: '隔板清洗烘干剪切设备 (129-295)'

      }]
    }
  },

模拟数据如上。