Vue tooltip 组件封装(动态地控制tooltip的显示，如果内容能够完全显示在父元素中，则不需要使用tooltip)_el-tooltip 只能包裹静态内容

Vue tooltip 组件封装

开发中经常遇到需要超出文本省略的需求，切鼠标移入要显示全部内容，虽然这个用传统的 title 可以实现，但是样式不美观

<div title='123'>123</div>
1

elemntUI 就给提供了 Tooltip 文字提示,样式比较美观，展示方式也不少

<el-tooltip
  class='item'
  effect='dark'
  content='Top Left 提示文字'
  placement='top-start'
>
  <el-button>上左</el-button>
</el-tooltip>
1
2
3
4
5
6
7
8

但是做页面的时候我们一般要求超出隐藏才显示提示框，这是就需要自己来封装一个组件来实现了（这边仍旧引入了 elementUI 的 tooltip，但是增加了一些判断，结合disabled属性进行显示或者不显示）】

1. 首先我们创建一个名为 commonTooltip.vue 的文件

<template>
  <div class="text-over-tooltip-components">
    <el-tooltip
      :effect="effect"
      :disabled="isDisabledTooltip"
      :content="content"
      :placement="placement"
      :open-delay="500"
    >
      <div class="ellipsis" :ref="className">
        <div
          style="display: block; visibility: hidden; position: absolute"
          :ref="refName + 'div'"
          class="none-label"
        >
          {{ content }}
        </div>
        <span :ref="refName">{{ content }}</span>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'CommonTooltip',
  props: {
    // 显示的文字内容
    content: String,
    // 设置父元素的样式：比如宽度字体等，需可以自己在组件内部配置样式比如字体大小20：fs20
    className: String,
    // 子元素标识（如在同一页面中调用多次组件，此参数不可重复）
    refName: String,
    // Tooltip 的出现位置top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
    placement: {
      type: String,
      default: () => {
        return 'top'
      }
    },
    effect: {
      type: String,
      default: () => {
        return 'light'
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    oneLine: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isDisabledTooltip: true
    }
  },
  watch: {
    content: {
      handler(val) {
        if (val) {
          if (this.disabled) return
          this.$nextTick(() => {
            this.handleJudeIsNeedToolip()
          })
        }
        //  this.isDisabledTooltip = val
      },
      immediate: true
    }
  },
  methods: {
    handleJudeIsNeedToolip() {
      let parentWidth = this.$refs[this.className].offsetWidth
      let contentWidth = this.$refs[this.refName + 'div'].offsetWidth
      // 判断是否禁用tooltip功能
      this.isDisabledTooltip = this.oneLine
        ? parentWidth >= contentWidth
        : parentWidth * 2 >= contentWidth
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

• .none-label中的文字是处于隐藏状态，切不换行，主要是用来和文字本身盒子的宽度做比较
• 父盒子和子盒子ref使用传参主要是怕同一个页面引入该组件时ref一样导致错乱
• oneLine主要是用来判断单行超出显示隐藏是是否显示提示框,否则超出两行显示提示框

2. 页面引入及使用

<script>
<template>
    <div>
        <common-tooltip
            :className="'ellipsisName' + 0"
            :refName="'toolitipName' + 0"
            :content="content"

        >
        </common-tooltip>
    </div>
</template>
import commonTooltip from '@/components/commonTooltip/index'
export default({
    data() {
        return {
          content:'123'
        }
    }
    components: { commonTooltip },
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22