el-tooltip二次封装,只有文本溢出时才显示

项目需求:需要给超出的文本加提示,没超出的不加提示,这里我使用的是el-tooltip组件。el-tooltip组件本身就是悬浮提示功能,所以对组件进行了二次封装(下面代码可以直接复制使用,哈哈)。

注意。这里主要是用了el-tooltip组件的disabled属性。

<template>
  <el-tooltip :effect="effect" :content="text" :placement="placement" :disabled="isShowTooltip">
    <div class="text-ellipsis" :class="className" @mouseover="onMouseOver">
      <span ref="ellipsis">{{ text }}</span>
    </div>
  </el-tooltip>
</template>

<script>
export default {
  props: {
    placement: {
      type: String,
      default: 'right-start',
    },
    text: {
      type: String,
      default: '',
    },
    effect: {
      type: String,
      default: 'dark',
    },
    className: { type: String, default: '' },
  },
  data() {
    return {
      isShowTooltip: false,
    };
  },
  created() {},
  methods: {
    onMouseOver() {
      let parentWidth = this.$refs['ellipsis'].parentNode.offsetWidth; // 获取元素父级可视宽度
      let contentWidth = this.$refs['ellipsis'].offsetWidth; // 获取元素可视宽度
      this.isShowTooltip = contentWidth <= parentWidth;
    },
  },
};
</script>
<style scoped lang="less">
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

然后在需要用到组件的页面中引入。

使用:

<tool-tip
    :text="码云笔记-前端博客-前端教程-记录web前端开发的个人技术博客"
    :placement="'left'"
>
</tool-tip>

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
码云笔记 » el-tooltip二次封装,只有文本溢出时才显示

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们