table-tooltip组件中外层元素和内层元素的样式写在style中。正常添加tooltip后,无论内层元素的长度是否大于外层元素的宽度,都会显示tooltip。所以需要根据外层元素的宽度加一层判断放到tooltip的disabled中。虽然我们可以在组件初始化的时候在mounted中获取父子元素的宽度,但是当表单域的宽度发生变化时,它无法实时响应disabled值。您可能会想到使用手表来监控元素的宽度。但是在实际的vue中,是无法监听dom的长宽的,所以这里我们使用自定义指令,添加本地指令来监听元素宽度的变化。代码如下:
