<tbody id="5vw1z"></tbody>
<rp id="5vw1z"></rp>
  •  

    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抓緊創作!

    微信微信 支付寶支付寶

    還沒有人贊賞,快來當第一個贊賞的人吧!

    聲明:
    1. 本站所有文章教程及資源素材均來源于網絡與用戶分享或為本站原創,僅限用于學習和研究。
    2. 如果內容損害你的權益請聯系客服QQ:1642748312給予處理。
    碼云筆記 » el-tooltip二次封裝,只有文本溢出時才顯示

    發表回復

    IT互聯網行業相關廣告投放 更專業 更精準

    立即查看 聯系我們
    亚洲 自拍 另类小说综合图区