二次封装el-tooltip组件

最新推荐文章于 2023-11-17 16:15:17 发布

白胡子的笑

最新推荐文章于 2023-11-17 16:15:17 发布

阅读量167

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_67251803/article/details/133926315

版权

<template>
   <el-tooltip
   effect="light"
   :disabled="disabled"
   v-bind="$attrs">
     <template @content>
       <slot name="content"></slot>
     </template>
    <div ref="tooltipContent" :class="{'text-overflow':row===1}" :style="lineStyle">
      <slot></slot>
    </div>
   </el-tooltip>
</template>
<script>
import {isIE} from '@/utils/files'

export default {
  name:'AppTooltipPro',
  props:{
    tooltipStyle:{
      type:[Object,String],
      default:()=>({})
    },
    row:{
      type:Number,
      default:1
    },
  },
 
  computed:{
    lineStyle({tooltipStyle}){
     if(typeof tooltipStyle==='string')return tooltipStyle
     return Object.assign({
       maxWidth:'100%'
     },tooltipStyle)
    },
  },
  data(){
    return {
      disabled:false
    }
  },
  mounted(){
    this.handleTipDisable()
  }
  methods: { 
   handleTipDisable(){
     const tooltipContent=this.$refs.tooltipContent
     if(this.row===1){
       this.handleOneLine(tooltipContent)
     }else{
       this.handle
     }
   },
  //  处理单行溢出
  handleOneLine(tooltipContent){
    if(!tooltipContent)return 
    let childrenWidth=0
    if(isIE()){
      tooltipContent.style.overflow='visible'
      let range=document.createRange()
      range.setStart(tooltipContent,0)
      range.setEnd(tooltipContent,tooltipContent.childNodes.length)
      childrenWidth=range.getBoundingClientRect().width
      range=null
      tooltipContent.style.overflow='hidden'
    }else{
      childrenWidth=this.$slots.default[0]?.elm.offsetWidth
    }
    this..disabled=childrenWidth<=tooltipContent.offsetWidth
  },
  // 处理多行溢出(因为多行溢出,为了支持ie直接裁剪文字，所以需要多行溢出时，子级只能是文本)
  handleMoreLine(tooltipContent){
    if(!tooltipContent)return
    const textWidth=this.$HI.size==='mini'?12:14
    const textHeight=this.$HI.size==='mini'?18:20
    const ellipseWidth=1
    const {offsetWidth:contentWidth,offsetHeight:contentHeight,innerHTML:text} =tooltipContent
    if(Math.floor(contentHeight/textHeight)>this.row){
      this.disabled=false
      const splitTxtCount=Math.floor((contentWidth*this.row)/textWidth)-ellipseWidth
      const splitTxt=text.slice(0,splitTxtCount)+'...'
      tooltipContent.innerHTML=splitTxt
    }else{
      this.disabled=true
    }
  }

  }
}
</script>
<style lang="less" scoped>
  .text-overflow{
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
  }
</style>