el-tooltip根據(jù)條件控制顯示的示例代碼

更新時間：2023年12月23日 10:44:20 作者：兜小糖的小禿毛

這篇文章主要介紹了el-tooltip根據(jù)條件控制顯示的示例代碼,包括列表型和樹狀圖型,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

el-tooltip根據(jù)條件控制顯示

一、列表型

代碼如下：

<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數(shù)據(jù)

// @/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,
  };
}

到此這篇關于el-tooltip根據(jù)條件控制顯示的文章就介紹到這了,更多相關el-tooltip根據(jù)條件控制顯示內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: