title提示信息超出显示

思路：主要是通过鼠标移入判断当前容器和其父级容器宽度大小比较决定是否添加title

vue中创建vue文件tabelFoldLine.vue;

<script>

export default {

   props: {

      labelName: {

         type: String,

         default: '',

      },

   },

   methods: {

      mouseOver(node) {

         if(node.target.offsetWidth > node.target.parentNode.clientWidth) {

            node.target.title = node.target.innerText;

         }

         else {

            node.target.title = '';

         }

      },

   },

   render() {

      return (<span onMouseover={this.mouseOver} >{this.labelName}</span>);

   },

};

</script>

 

局部使用 ：

import tabelFoldLine from './tabelFoldLine.vue';

<tabel-fold-line :labelName='xxxxxxx'></tabel-fold-line>

全局使用：通过install挂载 vue.use();

index.js

import tabelFoldLine from './tabelFoldLine.vue';

const TabelFoldLine = {

   install: function(Vue) {

      Vue.component('tabelFoldLine', tabelFoldLine);

   },

};

export default TabelFoldLine;

 

main.js中

import TabelFoldLine from './components/tabel-fold-line';

Vue.use(TabelFoldLine);

项目中直接调用<tabel-fold-line :labelName='xxxxxxx'></tabel-fold-line>