基于element-ui的 ToolTip组件封装(使用vue)

       ToolTip是element提供展示鼠标 hover 时提示信息的一款组件 最近开发中正好有这样的需求 并且添加了超出显示省略并提示 话不多说上代码。

<template>
  <el-tooltip class="item" effect="dark" :content="title" :placement="direction" ：disabled="disabled">
    <span> {{ handleTitle() }}</span>
  </el-tooltip>
</template>
<script>
export default {
  name: 'ToolTip',

  props: {
    title: {
      type: String,
      required: false
    },
    max: {
      type: Number,
      required: false,
      default: 10
    },
    direction: {
      type: String,
      required: false,
      default: 'top'
    }
  },
  data()
{
    return{
disabled="false"
}
},
  methods: {
    handleTitle() {
      if (this.title.length > this.max) {
        return this.title.slice(0, this.max) + '...'
      } else {
        disabled="true" //不超出是不显示
        return this.title
      }
    }
  }
}
</script>

组件的引入

<el-table-column label="客户名称" align="center" prop="customerName" width="150">
        <template slot-scope="scope">
          <ToolTip :title="scope.row.customerName" />
        </template>
      </el-table-column>

<script>
import ToolTip from '@/components/ToolTip'


export default {
  name: '',
  components: {

 ToolTip
}
},

实际效果