el-tooltip超出显示

• Jave

在Element UI中，el-tooltip组件默认就是当内容超过其容器范围时显示 tooltip。但是如果你想在内容超出指定宽度时才显示tooltip，你需要自定义一个判断逻辑来动态控制el-tooltip的visible属性。

下面是一个简单的示例：

  
    
      {{ text }}
    
  



export default {
  data() {
    return {
      text: '这是一段可能会超出容器的文字',
      isOverflow: false,
    };
  },
  mounted() {
    this.checkOverflow();
  },
  methods: {
    checkOverflow() {
      this.isOverflow = this.$refs.container.offsetWidth < this.$refs.container.scrollWidth;
    },
  },
  watch: {
    // 监听text变化，实时检查是否溢出
    text: {
      handler(newVal) {
        this.checkOverflow();
      },
      deep: true,
    },
  },
};

在这个示例中，我们首先设置了一个固定宽度的容器，并且内容会隐藏溢出的部分。然后通过mounted钩子函数以及watch属性对text进行监听，实时调用checkOverflow方法来判断内容是否溢出。如果内容的实际宽度大于容器的宽度，则将isOverflow设为true，此时tooltip就会显示；否则，将isOverflow设为false，tooltip则不会显示。

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/28857aa649.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐