【VUE Antd的Tooltip文字不超出时不显示】

主要实现Vue - Antd UI框架的Tooltip默认是鼠标放在内容上就会自动显示，现在想只有文字溢出省略时才显示Tooltip。

1、在methods中添加 showToolTip 方法用于阻止鼠标的移入事件

showToolTip(e) {
	if (e.target.clientWidth >= e.target.scrollWidth) {
		e.target.style.pointerEvents = "none"; // 阻止鼠标的移入事件
 	}
},

2、在<a-tooltip 的标签中添加 @mouseenter=“showToolTip” 用于鼠标移入事件监听

<a-tooltip @mouseenter="showToolTip">
	... //内部代码
</a-tooltip>

3、不分代码展示

<template>
	<div class="box">
	  	<div v-for="(item,index) in array">
			<a-tooltip placement="right" @mouseenter="showToolTip">
      			<template slot="title">
        			<div style="overflow-y: auto; max-height: 300px;">
          				<span>{{text.orgs}}</span>
        			</div>
      			</template>
      			//控制显示长度超出部分 ...
      			<div style="max-width: 200px; overflow: hidden; text-overflow: ellipsis;">{{text.orgs}}</div>
    		</a-tooltip>
    	</div>
  	</div>
</template>

<script>
export default {
  data() {
    return {
    	array:[
    		{content: '少的内容：Tooltip默认', type: ''},
    		{content: '多的内容：Tooltip默认是鼠标放在内容上就会自动显示，现在想只有文字溢出省略时才显示Tooltip', type: ''}
    	]
    };
  },
  methods: {
  	// 控制Tooltip显隐
    showToolTip(e) {
      if (e.target.clientWidth >= e.target.scrollWidth) {
        e.target.style.pointerEvents = "none"; // 阻止鼠标事件
      }
    },
  }
};
</script>

<style lang="less" scoped>
</style>

代码仅用于展示方法和监听事件放置的位置，如有帮助到您那就太好了！