el-tooltip封装

el-tooltip

封装组件

<template>
  <el-tooltip :content="String(props.content)" :disabled="tooltipIsShow" :placement="props.placement"
    :popper-class="props.popperClass ?props.popperClass : 'table-body-tooltip'">
    <div class="text-ellipsis" @mouseenter="tooltipIsDisHandler($event)">
      {{ props.content }}
    </div>
  </el-tooltip>
</template>

<script setup>
import { ref } from "vue"

const props = defineProps({
  content: {
    type: [String, Number],
    default: () => {
      return undefined
    }
  }, // 文本
  popperClass: {
    type: [String],
    default: () => {
      return undefined
    }
  }, // 自定义类名
  placement: {
    type: [String],
    default: () => {
      return 'top'
    }
  }, // 自定义类名
})

let tooltipIsShow = ref(false)

const tooltipIsDisHandler = ev => {
  if (ev.target.clientWidth < ev.target.scrollWidth) {
    tooltipIsShow.value = false
  } else {
    tooltipIsShow.value = true
  }
}
</script>

<style lang="scss" scoped>
.text-ellipsis {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<style lang="scss" >

// 自定义的类名
.tooltip_my_class {
  width: 360px;
  background-color: #5e99d6 !important; // 展开下拉背景
  border: 1px solid #5e99d6 !important; // 展开下拉边框
}
.tooltip_my_class .el-popper__arrow::before {
  border-top: 1px solid #5e99d6 !important; // 箭头按钮边框
  background-color: #5e99d6 !important; // 箭头按钮背景色
  border-color: #5e99d6 !important; // 箭头按钮背景色
}
</style>

使用

<my-tooltips :popperClass="'tooltip_my_class'" :placement="'top-start'" :content="item.name ?? ''" />