当前位置：首页 > article >正文

vue3项目中el-tooltip实现内容溢出时再显示，并设置tip的最大宽度

article 2024/12/25 2:20:32

html代码

<el-tooltip :disabled="!textIsOverflow" placement="top">
    <template #content>
      <div class="tooltip-div">
        tootip的内容
      </div>
    </template>
    <div class="textOverflow" ref="textRef">触发的内容，这里要处理成溢出采用省略号效果，配合tooltip食用，完美</div>
  </el-tooltip>

js代码

const textRef = ref();
const textIsOverflow = ref(false);
// 判断内容是否超出div的宽度
const checkIsOverflow = () => {
  if (textRef.value) {
    const clientW = textRef.value.clientWidth;
    const scrollW = textRef.value.scrollWidth;
    textIsOverflow.value = scrollW > clientW;
  }
};
onMounted(() => {

  // nextTick(() => {
    checkIsOverflow();// 这行代码放在tip使用的数据返回的地方，获取不到dom元素的话配合nextTick使用。或者放在onMounted里。
  // })
})

css代码

.tooltip-div {
  max-width: 200px;
}

.textOverflow {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: default;
}

查看全文

http://www.kler.cn/a/375399.html