mixins 封装

TooltipIsShowMixin.js

export const TooltipIsShowMixin = {data() {return {tooltipIsShow: false}},methods: {tooltipIsDisHandler(className) {this.$nextTick(() => {const dom = document.querySelector(className)const domScrollWidth = dom && dom.scrollWidthconst domClientWidth = dom && dom.clientWidth// console.log('domScrollWidth----', domScrollWidth)// console.log('domClientWidth----', domClientWidth)this.tooltipIsShow = domClientWidth >= domScrollWidth})}}
}

使用 TooltipIsShowMixin

<div class="list" :style="{ '--height': tableMaxHeight + 'px' }"><div v-for="(item, index) in tableData" :key="index" class="list-card"><div class="list-card-pic"><div class="list-card-pic-type">{{ item.type }}</div><div class="list-card-pic-time">{{ item.duration }} {{ item.createTime }}</div></div><div class="list-card-info"><div class="list-card-info-header"><div class="list-card-info-header-title font-bold text-lg">{{ item.title }}</div><div class="list-card-info-header-opera"><el-button type="text" icon="el-icon-edit" /><el-button type="text" icon="el-icon-delete" /></div></div><div class="list-card-info-describe"><el-tooltipeffect="dark":content="item.description"placement="top-start":disabled="tooltipIsShow"><span:class="[`description${index}`]"@mouseenter="tooltipIsDisHandler(`.description${index}`)">{{ item.description }}</span></el-tooltip></div></div></div>
</div><script>
import { TooltipIsShowMixin } from '@/mixins/TooltipIsShowMixin'export default {// ...mixins: [TooltipIsShowMixin],
}
</script>
<style scoped lang="scss">
.list {height: var(--height);overflow: auto;&-card {display: inline-block;width: calc(25% - 12px);margin: 0 15px 15px 0;box-shadow: 0 0 5px #ccc;&:nth-child(4n) {margin-right: 0;}&-pic {height: 170px;background: url('~@/assets/image/default-course-cover.png') no-repeat;background-size: 100% 100%;position: relative;color: #fff;$width: 10px;&-type {position: absolute;top: $width;right: $width;background: rgba($color: #fff, $alpha: 0.3);border-radius: 10px;padding: 3px 8px;}&-time {position: absolute;bottom: $width;right: $width;}}&-info {padding: 10px 20px;background-color: #fff;&-header {display: flex;justify-content: space-between;align-items: center;}&-describe {margin: 5px 0;color: #00000073;span {display: inline-block;width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}}}}
}
</style>

效果展示

未溢出的鼠标悬浮不展示 el-tooltip
溢出展示省略号的鼠标悬浮展示 el-tooltip