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 () {
}
}