el-tooltip动态显示隐藏tip效果,计算文本宽度_el-tooltip 隐藏

<template>
  <div style="margin: 100px">
    <h3>el-tooltip动态显示隐藏tip效果,计算文本宽度</h3>
    <el-tooltip
      :content="text"
      effect="dark"
      placement="top-start"
      :disabled="!disabledTip"
    >
      <div class="tooltip-wrap" @mouseenter="visibilityChange($event)">
        {{ text }}
      </div>
    </el-tooltip>
    <el-input v-model="text"></el-input>
  </div>
</template>
 
<script>
export default {
  name: "ellipsisTooltip",
 
  data() {
    return {
      disabledTip: false,
      text: "文本输入",
    };
  },
  mounted() {},
  methods: {
    visibilityChange(e) {
      this.disabledTip = e.target.clientWidth < e.target.scrollWidth;
    },
  },
};
</script>
 
<style lang="scss" scoped>
.tooltip-wrap {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>