el-tooltip根据内容自适应显示tooltip

背景

el-tooltip虽然有disabled属性可以去控制tooltip是否显示，但tooltip包裹的内容我们无法控制，需求期望在内容溢出时才显示tooltip，否则不显示，因此需要动态设置el-tooltip的disabled属性

实现思路

// 获取el-tooltip包裹的dom元素
const dom = document.querySelector(`#${this.dataIdentify}`)
// 通过scrollWidth和clientWidth判断是否溢出，动态设置disabled属性
this.disabled = dom.scrollWidth <= dom.clientWidth

组件设计

Props

Name	Type	Default value	Required?	Description
content	String	-	Yes	tooptip提示内容
effect	String	light	No	默认提供的主题 dark/light
placement	String	top	No	Tooltip 的出现位置

Data

Name	Type	Default value	Description
disabled	Boolean	false	tooltip是否显示

Example

npm i make-paper-com --save

// main.js
// ...

import EllipsisToolTip from 'make-paper-com';
Vue.use(EllipsisToolTip)

// ...

<EllipsisToolTip
  class="mw0"
  :content="form.audioName"
  v-slot="slotProps"
>
  <span
    class="audio-name"
    @click="playAudio"
    :id="slotProps.dataIdentify"
  >
    {{ form.audioName }}
  </span>
</EllipsisToolTip>