日常组件封装

1.# el-tooltip动态根据内容是否超出隐藏来进行显示

<template>
  <div class="tooltip-wrap">
    <el-tooltip
      ref="tlp"
      :content="text"
      effect="dark"
      :disabled="!tooltipFlag"
      :placement="placement"
      class="tooltip">
      <span :class="className" @mouseenter="visibilityChange($event)">{{text}}</span>
    </el-tooltip>
  </div>
</template>
 
<script>
export default {
  name: 'ellipsisTooltip',
  props: {
    text: { // 文本内容
      type: String,
      default: () => ''
    },
    className: {
      type: String,
      default: () => 'text'
    },
    placement: {
      type: String,
      default: () => 'top-start'
    }
  },
  data() {
    return {
      disabledTip: false,
      tooltipFlag: false
    }
  },
  mounted() {
  },
  methods: {
    visibilityChange(e) {
      const ev = e.target
      const evWidth = ev.offsetWidth
      const contentWidth = this.$refs.tlp.$el.parentNode.clientWidth
      this.tooltipFlag = contentWidth < evWidth
    }
  }
}
</script>
 
<style lang="scss" scoped>
  .tooltip-wrap{
    overflow: hidden;
    text-overflow: ellipsis;
    span{
      white-space: nowrap;
    }
  }
</style>

引用

通过import引用并且创建该组件

import ellipsisTooltip from '@/components/ellipsisTooltip'
components: {
  ellipsisTooltip
}
 引用创建后的组件传入需要处理的文本内容即可，代码如下：

<ellipsisTooltip v-else :text="[null, undefined, ''].includes(formData[item.key])
                            ? item.default || '-'
                            : formData[item.key]"
                            />