Tooltip实现

<template>  <a-tooltip    v-if="isShowTooltip"    placement="top"    trigger="hover"    overlayClassName="table-class"    v-model:visible="isShow"  >    <template #title>      <span>{{ content }}</span>    </template>    <div class="content" @mouseleave="mouseleave">      <span ref="contentRef">        <slot></slot>      </span>    </div>  </a-tooltip>  <div v-else class="content" @mouseenter="mouseenter">    <span ref="contentRef">      <slot>{{ contentText }}</slot>    </span>  </div></template><script lang="ts">import { defineComponent, ref } from "vue";export default defineComponent({  props: {    content: {      type: String,      default: "",    },  },  setup() {    const isShow = ref(true);    const contentRef = ref();    const isShowTooltip = ref(false);    const mouseleave = () => {      // isShowTooltip.value = false    };    const mouseenter = () => {    // 要害代码逻辑      if (        contentRef.value.parentNode.offsetWidth > contentRef.value.offsetWidth      ) {        isShowTooltip.value = false;      } else {        isShowTooltip.value = true;      }    };    return {      isShow,      contentRef,      mouseenter,      mouseleave,      isShowTooltip,    };  },});</script><style>.content {  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;}</style>

Table封装及tooltip应用

次要看tooltip的性能实现

<template>  <a-table v-bind="$attrs" :rowKey="rowkeyIndex" :pagination="pagination">    <template #bodyCell="{ column, text, record }">      <template v-if="column.slot">        <!-- 如果配置了ellipsis -->        <ele-tooltip v-if="column.ellipsis" :content="text">          <slot            :name="column.dataIndex"            :col="column"            :rowItem="column"            :text="text"            :rowData="record"          ></slot>        </ele-tooltip>        <slot          v-else          :name="column.dataIndex"          :col="column"          :rowItem="column"          :text="text"          :rowData="record"        ></slot>      </template>      <!-- 默认没有slot 且配置了ellipsis -->      <template v-else-if="column.ellipsis">        <ele-tooltip :content="text">          {{ text }}        </ele-tooltip>      </template>    </template>    <template #headerCell v-if="slot.header">      <slot name="header"></slot>    </template>  </a-table></template><script lang="ts">import { defineComponent, computed } from "vue";import eleTooltip from "@/components/tooltip/index.vue";export default defineComponent({  name: "commonTable",  components: {    eleTooltip,  },  props: {    keyId: {      type: String,      default: "",    },    showQuickJumper: {      type: Boolean,      default: true,    },    showLessItems: {      type: Boolean,      default: false,    },    showSizeChanger: {      type: Boolean,      default: true,    },    total: {      type: Number,      default: 0,    },    paginationSize: {      type: String,      default: "",    },    defaultPageSize: {      type: Number,      default: 10,    },    pageSize: {      type: Number,      default: 10,    },    current: {      type: Number,      default: 1,    },  },  setup(props, context) {    const attrs: any = context.attrs;    const slot = context.slots;    const columnsCustom = computed(() => {      return (        attrs.columns &&        attrs.columns          .filter((item: any) => {            return item.slot;          })          .map((item: any) => item.slot)      );    });    // 从新定义表格分页    const pagination = computed(() => {      return {        size: props.paginationSize,        hideOnSinglePage: false,        pageSize: props.pageSize,        current: props.current,        defaultPageSize: props.defaultPageSize,        showQuickJumper: props.showQuickJumper,        showLessItems: props.showLessItems,        showSizeChanger: props.showSizeChanger,        pageSizeOptions: ["10", "20", "50", "100"],        total: props.total,        showTotal: (total: number) => {          return `共 ${total} 条`;        },      };    });    const rowkeyIndex = (row: any) => {      return row.id || row[props.keyId];    };    return {      slot,      rowkeyIndex,      columnsCustom,      pagination,    };  },});</script>