关键字高亮及配合 el-tooltip 使用

关键字高亮及配合 el-tooltip 使用

仅做个人学习记录

const tooltipDisabled = ref(false);

const wordLightHigh = (content: string, keyword: string) => {
  if (keyword && keyword.length > 0) {
    let reg = new RegExp("(" + keyword + ")", "ig");
    let str = "";
    str = `<span class="lightHigh">$1</span>`;
    content = content.replace(reg, str);
  }
  return content;
};

const Mouseenter = (e: MouseEvent) => {
  if (
    (e.target as HTMLElement).clientWidth <
    (e.target as HTMLElement).scrollWidth
  ) {
    tooltipDisabled.value = false;
  } else {
    tooltipDisabled.value = true;
  }
};

const MouseLeave = () => {
  tooltipDisabled.value = false;
};

showWord.value = wordLightHigh("张三是张三，李四是李四", "张三"); //<span class="lightHigh">张三</span>是<span class="lightHigh">张三</span>，李四是李四

.lightHigh {
    color: #4798fa;
}

栗1（默认显示 tooltip）

  <section>
    <el-tooltip effect="dark" placement="bottom">
      <template #content>
        <div v-html="showWord"></div>
      </template>
      <div>张三是张三，李四是李四</div>
    </el-tooltip>
  </section>

效果图

栗2（显示...的才显示 tooltip，否则不显示）

<section>
    <el-tooltip effect="dark" placement="bottom" :disabled="tooltipDisabled">
      <template #content>
        <div v-html="showWord"></div>
      </template>
      <div
        style="
          max-width: 60px;
          height: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        "
        @mouseenter="Mouseenter($event)"
        @mouseleave="MouseLeave"
      >
        张三是张三，李四是李四
      </div>
    </el-tooltip>
    <el-tooltip effect="dark" placement="bottom" :disabled="tooltipDisabled">
      <template #content>
        <div v-html="showWord"></div>
      </template>
      <div @mouseenter="Mouseenter($event)" @mouseleave="MouseLeave">
        张三是张三，李四是李四
      </div>
    </el-tooltip>
  </section>

效果图

完整代码

<template>
  <section>
    <el-tooltip effect="dark" placement="bottom">
      <template #content>
        <div v-html="showWord"></div>
      </template>
      <div>张三是张三，李四是李四</div>
    </el-tooltip>
  </section>
  <section>
    <el-tooltip effect="dark" placement="bottom" :disabled="tooltipDisabled">
      <template #content>
        <div v-html="showWord"></div>
      </template>
      <div
        style="
          max-width: 60px;
          height: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        "
        @mouseenter="Mouseenter($event)"
        @mouseleave="MouseLeave"
      >
        张三是张三，李四是李四
      </div>
    </el-tooltip>
    <el-tooltip effect="dark" placement="bottom" :disabled="tooltipDisabled">
      <template #content>
        <div v-html="showWord"></div>
      </template>
      <div @mouseenter="Mouseenter($event)" @mouseleave="MouseLeave">
        张三是张三，李四是李四
      </div>
    </el-tooltip>
  </section>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import { ref } from "vue";
const showWord = ref("");
const tooltipDisabled = ref(false);
const Mouseenter = (e: MouseEvent) => {
  if (
    (e.target as HTMLElement).clientWidth <
    (e.target as HTMLElement).scrollWidth
  ) {
    tooltipDisabled.value = false;
  } else {
    tooltipDisabled.value = true;
  }
};
const MouseLeave = () => {
  tooltipDisabled.value = false;
};

const wordLightHigh = (content: string, keyword: string) => {
  if (keyword && keyword.length > 0) {
    let reg = new RegExp("(" + keyword + ")", "ig");
    let str = "";
    str = `<span class="lightHigh">$1</span>`;
    content = content.replace(reg, str);
  }
  return content;
};
showWord.value = wordLightHigh("张三是张三，李四是李四", "张三");
</script>
<style lang="scss">
.lightHigh {
  color: #4798fa;
}
</style>