vue判断字符串是否溢出来显示弹窗

2020-10-15

字数统计: 343 | 阅读时长≈ 1 分钟

vue判断字符串是否溢出来显示弹窗

总体的思路就是获取dom元素，根据dom元素的 clientWidth 与 scrollWidth 来判断是否溢出，我这里正好碰到v-for，所以需要动态绑定每一个元素的ref

template

<div v-for="item in items" :key="item.id">
    <el-tooltip
                :disabled="isOverflow($refs[item.id])"
                :content="`${item.content}`"
                effect="dark"
                placement="top">
        <span :ref="item.id">{{ item.content }}</span>
    </el-tooltip>
</div>

处理函数 isOverflow

isOverflow(element) {
    return element ? element[0].clientWidth >= element[0].scrollWidth : false;
}

整理成组件

<template>
  <el-tooltip
          :disabled="disabled"
          effect="dark"
          :content="tooltipContent || content"
          placement="top"
          :enterable="false">
    <div ref="overflowTooltipContent"
         :class="className" class="overflow-content" @mouseover="isOverflow">
      {{ content }}
    </div>
  </el-tooltip>
</template>

<script>
export default {
 name: 'overflow-tooltip',
 props: {
  className: {
   type: String,
   default: ''
  },
  content: {
   type: String,
   default: ''
  },
  tooltipContent: {
   type: String,
   default: ''
  }
 },
 data() {
  return {
   disabled: true
  };
 },
 methods: {
  isOverflow() {
   if (this.$refs.overflowTooltipContent) {
    this.disabled = this.$refs.overflowTooltipContent.offsetWidth >= this.$refs.overflowTooltipContent.scrollWidth;
   }
  }
 }
};
</script>

<style lang="scss" scoped>
.overflow-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

打赏

版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！