脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue el-tooltip提示黑框遮挡

vue中的el-tooltip提示黑框遮挡问题

 更新时间：2023年06月02日 11:07:11   作者：小蘑菇0629  
这篇文章主要介绍了vue中的el-tooltip提示黑框遮挡问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue el-tooltip提示黑框遮挡

在用于文字过长提示的时候，如果输入框为空。

就会出现黑框遮挡问题。

解决方法

例：

 <el-table-column prop='Remark' :label='trInvoiceBatch.Remark.Name' show-overflow-tooltip v-if="!readOnly">
          <template scope='scope'>
            <el-tooltip class="item" effect="dark" :content="scope.row.Remark" placement="top-start" :disabled="scope.row.Remark.length<5">
            <el-input size='small' v-model='scope.row.Remark' @change='setRowStateType(scope.row)'></el-input>
            </el-tooltip>
          </template>
        </el-table-column>

使用     :disabled="scope.row.Remark.length<5"    来解决问题

贴上  el-tooltip 的详细用法

el-tooltip的使用（根据条件控制显示）

el-tooltip根据条件控制显示

列表型

代码如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in listData" :key="item.id" class="item_box">
        <el-tooltip
          effect="dark"
          :content="item.content"
          :popper-class="isShowTooltip ? 'hide-tooltip' : ''"
        >
          <p class="item">
            <span
              @mouseenter.stop.prevent="onMouseOver(index)"
              @mouseleave.stop.prevent="isShowTooltip = true"
              :class="showMenuClass"
              >{{ item.content }}</span
            >
          </p>
        </el-tooltip>
      </li>
    </ul>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
import DataJS from "@/JSON/data.js";
import $ from "jquery";
export default defineComponent({
  name: "page-five",
  setup() {
    const { DataJSON } = DataJS();
    const state = reactive({
      isShowTooltip: true,
      showMenuClass: "ref_" + Math.random().toString(7).substr(2),
    });
    let timer = null;
    function onMouseOver(index) {
      state.isShowTooltip = true;
      let data = null;
      data = $(`.${state.showMenuClass}`)[index];
      let parentWidth = data.parentNode.offsetWidth;
      let contentWidth = data.offsetWidth;
      clearTimeout(timer);
      timer = setTimeout(() => {
        if (contentWidth > parentWidth) {
          console.log(parentWidth, contentWidth);
          state.isShowTooltip = false;
        }
      }, 500);
    }
    return {
      ...toRefs(DataJSON),
      ...toRefs(state),
      onMouseOver,
    };
  },
});
</script>
<style>
.item_box {
  height: 35px;
  width: 400px;
  list-style-type: none;
}
.item {
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.hide-tooltip {
  visibility: hidden;
}
</style>

效果展示：

树状图型

代码如下：

<template>
  <div class="tree_box">
    <el-tree :data="treeData">
      <template #default="{ node }">
        <el-tooltip
          effect="dark"
          :content="node.label"
          :popper-class="treeTooltip ? 'hide-tooltip' : ''"
        >
          <p class="tree_title" :class="showTreeClass + '-' + node.id">
            <span
              @mouseenter.stop.prevent="ellipsis(node.id)"
              @mouseleave.stop.prevent="treeTooltip = true"
              >{{ node.label }}</span
            >
          </p>
        </el-tooltip>
      </template></el-tree
    >
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
import TreeDataJS from "@/JSON/treeData.js";
import $ from "jquery";
export default defineComponent({
  name: "page-five",
  setup() {
    const { TreeDataJSON } = TreeDataJS();
    const state = reactive({
      treeTooltip: true,
      showTreeClass: "ref_" + Math.random().toString(7).substr(2),
    });
    // 树eltoop
    let treeTimer = null;
    function ellipsis(index) {
      let treeDataHtml = null;
      treeDataHtml = $(`.${state.showTreeClass + "-" + index}`)[0];
      let treeParentWidth = treeDataHtml.parentNode.offsetWidth;
      let treeContentWidth = treeDataHtml.offsetWidth;
      let treeLeft = treeDataHtml.offsetLeft;
      clearTimeout(treeTimer);
      treeTimer = setTimeout(() => {
        if (treeContentWidth + treeLeft + 4 > treeParentWidth) {
          state.treeTooltip = false;
        }
      }, 500);
    }
    return {
      ...toRefs(TreeDataJSON),
      ...toRefs(state),
      ellipsis,
    };
  },
});
</script>
<style>
.tree_box {
  margin-top: 90px;
  width: 500px;
}
.tree_title {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hide-tooltip {
  visibility: hidden;
}
</style>
片

效果展示：

注意：均要设置所设选择器的样式

.hide-tooltip {
	visibility: hidden;
}

附JSON数据

// @/JSON/data.js
import { reactive } from "vue";
export default function () {
  const state = reactive({
    listData: [
      {
        id: 1,
        content: "你真的无法想象我就像是住在一个鱼缸",
      },
      {
        id: 2,
        content: "鱼缸旅馆里该有的什么都有",
      },
      {
        id: 3,
        content: "像一个小小的时空胶囊",
      },
      {
        id: 4,
        content: "那些说爱我的人,都可以清楚地追踪我,不像鱼无视目光只有鱼自己",
      },
      {
        id: 5,
        content:
          "我努力做他们热爱的我,我与陌生的自己窃窃私语,就像看到透明人一览无遗",
      },
      {
        id: 6,
        content:
          "我没有退缩也没有闪躲,当我流泪也没有人看穿,那些不爱我的人,也可以无谓地注视我,看我在鱼缸里因无聊而崩溃",
      },
      {
        id: 7,
        content: "我派无人飞机出去寻找,以为你会带来救兵的讯号",
      },
      {
        id: 8,
        content: "除了想你时吐出的气泡,我在机场冰冷等待拥抱",
      },
      {
        id: 9,
        content: "鱼缸里没有黑夜,我也失去了我的睡眠",
      },
      {
        id: 10,
        content:
          "我忘了我是水里游荡的王子,还是他已经溺毙的爱人,还是他已经溺毙的爱人",
      },
    ],
  });
  return {
    DataJSON: state,
  };
}
// @/JSON/treeData.js
import { reactive } from "vue";
export default function () {
  const state = reactive({
    treeData: [
      {
        id:'1',
        label: "鱼缸旅馆",
        children: [
          {
            id:'1-1',
            label: "你真的无法想象我就像是住在一个鱼缸",
            children: [
              {
                id:'1-2',
                label: "鱼缸旅馆里该有的什么都有",
              },
              {
                id:'1-3',
                label: "像一个小小的时空胶囊",
              },
            ],
          },
        ],
      },
      {
        id:'2',
        label: "那些说爱我的人,都可以清楚地追踪我,不像鱼无视目光只有鱼自己",
        children: [
          {
            id:'2-1',
            label:
              "我努力做他们热爱的我,我与陌生的自己窃窃私语,就像看到透明人一览无遗",
            children: [
              {
                id:'21-1',
                label:
                  "我没有退缩也没有闪躲,当我流泪也没有人看穿,那些不爱我的人,也可以无谓地注视我,看我在鱼缸里因无聊而崩溃",
              },
              {
                id:'2-1-2',
                label: "我派无人飞机出去寻找,以为你会带来救兵的讯号",
              },
            ],
          },
          {
            id:'3',
            label: "除了想你时吐出的气泡,我在机场冰冷等待拥抱",
            children: [
              {
                id:'3-1',
                label: "鱼缸里没有黑夜,我也失去了我的睡眠",
              },
              {
                id:'3-2',
                label:
                  "我忘了我是水里游荡的王子,还是他已经溺毙的爱人,还是他已经溺毙的爱人",
              },
            ],
          },
        ],
      },
    ],
  });
  return {
    TreeDataJSON: state,
  };
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue中uni-app 实现小程序登录注册功能

    vue中uni-app 实现小程序登录注册功能

    这篇文章主要介绍了uni-app 实现小程序登录注册功能,文中给大家介绍了实现思路，以及vuex和本地缓存的区别，需要的朋友可以参考下
    2019-10-10
  • VUE前端实现token的无感刷新3种方案(refresh_token)

    VUE前端实现token的无感刷新3种方案(refresh_token)

    这篇文章主要给大家介绍了关于VUE前端实现token的无感刷新3种方案(refresh_token)的相关资料,为了提供更好的用户体验,我们可以通过实现Token的无感刷新机制来避免用户在使用过程中的中断,需要的朋友可以参考下
    2023-11-11
  • Vue2中Element DatePicker组件设置默认日期及控制日期范围

    Vue2中Element DatePicker组件设置默认日期及控制日期范围

    后台项目想使用时间选择器选择一段时间进行数据筛选,所以下面这篇文章主要给大家介绍了关于Vue2中Element DatePicker组件设置默认日期及控制日期范围的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • Vue3实现clipboard复制的使用示例

    Vue3实现clipboard复制的使用示例

    在日常开发中,为用户提供复制文本功能的需求比较常见,下面介绍一款vue3可用的插件,可以快速实现这个功能,感兴趣的可以了解一下
    2023-11-11
  • vue-element-admin后台生成动态路由及菜单方法详解

    vue-element-admin后台生成动态路由及菜单方法详解

    vue-element-admin后台管理系统模板框架 是vue结合element-ui一体的管理系统框架,下面这篇文章主要给大家介绍了关于vue-element-admin后台生成动态路由及菜单的相关资料,需要的朋友可以参考下
    2023-09-09
  • VUE组件传参超详细讲解

    VUE组件传参超详细讲解

    vue的特点之一是组件化开发，那么问题来了，组件中的数据和方法都是独立的，我们如何进行组件之间的交互呢。这个时候就要用到组件传参了
    2022-07-07
  • Vue this.$router.push(参数)实现页面跳转操作

    Vue this.$router.push(参数)实现页面跳转操作

    这篇文章主要介绍了Vue this.$router.push(参数)实现页面跳转操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 一文教你学会在Vue3中自定义指令

    一文教你学会在Vue3中自定义指令

    这篇文章主要为大家详细介绍一下如何在Vue3中实现自定义指令，文中的示例代码讲解详细，具有一定的借鉴价值，需要的同学可以参考一下
    2022-07-07
  • vue实现自定义多选按钮

    vue实现自定义多选按钮

    这篇文章主要为大家详细介绍了vue实现自定义多选按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-07-07
  • 详解从react转职到vue开发的项目准备

    详解从react转职到vue开发的项目准备

    这篇文章主要介绍了详解从react转职到vue开发的项目准备，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01

最新评论