el-tooltip 根据内容长度显示隐藏

el-tooltip 根据内容长度显示隐藏

思路： 把要显示内容的抽出来当一个组件，利用ref,监听传进来的数据，只要发生变化就对比字体的长度跟原本容器的宽度

<template>
  <div class="span-width">
    <span ref="spanWidth" v-if="!showMore">{{agencyName}}</span>
    <el-tooltip placement="top" effect="light" v-if="showMore">
      <div slot="content">{{agencyName}}</div>
      <span>{{agencyName}}</span>
    </el-tooltip>
  </div>
</template>
<script>码片

在这里插入export default {
  data () {
    return {
      showMore: false
    }
  },
  props: {
    agencyName: {
      type: String,
      default: ''
    },
    maxWidth: {
      type: Number,
      default: 188
    }
  },
  watch: {
    'agencyName': {
      immediate: true,
      handler (val) {
        this.$nextTick(() => {
          let _width = this.$refs.spanWidth ? this.$refs.spanWidth.offsetWidth : 0
          this.showMore = _width >= this.maxWidth
        })
      }
    }
  },
  mounted () {
  }
}