el-checkbox實現文本超出設定寬度則超出部分顯示為【...】，鼠標移入顯示全稱提示框

效果圖

依賴說明

使用element-ui的el-checkbox和el-tooltip進行二次封裝，故依賴element-ui

該組件可配合el-checkbox-group使用

功能介紹

• 文本超出設定的寬度后，超出部分顯示...
• 如果文本超出，鼠標移入到checkbox時，會顯示包含全文內容的提示框
• 如果文本未超出，鼠標移入不會展示提示框

組件代碼

<!--
  當label內的文字超出設定的寬度，超出部分顯示[...],
  鼠標移入時顯示tooltip提示框
  基於el-checkbox、el-tooltip封裝，可用在el-checkbox-group中
-->

<template>
  <div :style="{width}" @mouseout="mouseover" @mouseover="mouseover">
    <el-tooltip :content="label"
                :placement="tooltipOption.position"
                :value="showTooltip"
                manual>
      <el-checkbox ref="checkbox"
                   v-model="myChecked"
                   :label="value"
                   class="checkbox"
                   @change="$emit('change', $event)">
        {{ label }}
      </el-checkbox>
    </el-tooltip>
    <!-- 用於確定字符長度的隱藏域 -->
    <span ref="hidden" style="position:absolute;left: -100000px;">
      <span class="el-checkbox__inner"></span>
      <span class="el-checkbox__label">
        {{ label }}
      </span>
    </span>
  </div>
</template>

<script>
export default {
  name: 'OutTooltipCheckbox',
  model: {
    prop: 'checked',
    event: 'v-model'
  },
  props: {
    // 整個checkbox的寬度，可設置px/%，默認200px
    width: {
      type: String,
      default: '200px'
    },

    // tooltip配置
    tooltipOption: {
      type: Object,
      default: () => ({
        position: 'top-start'
      })
    },

    // checkbox的文本
    label: {
      default: ''
    },

    // checkbox選中的值
    value: {
      default: ''
    },

    // 是否選中
    checked: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showTooltip: false
    }
  },
  computed: {
    myChecked: {
      get() {
        return this.checked
      },
      set(v) {
        this.$emit('v-model', v)
      }
    }
  },
  methods: {
    mouseover(e) {
      if (e.type === 'mouseout')
        return this.showTooltip = false

      let hiddenLength = this.$refs.hidden.offsetWidth
      let checkboxLength = this.$refs.checkbox.$el.offsetWidth
      this.showTooltip = hiddenLength > checkboxLength
    }
  }
}
</script>

<style scoped>
.checkbox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/deep/ .el-checkbox__label {
  line-height: 14px;
  padding-bottom: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

樣例

<!-- 在多選框組中使用 -->
<out-tooltip-checkbox label="我是一段很長很長的文本"
                      value="我是選中時的值"
                      width="100px">
</out-tooltip-checkbox>

<!-- 單獨使用 checked是綁定的變量 -->
<out-tooltip-checkbox label="我是一段很長很長的文本"
                      v-model="checked"
                      width="100px">
</out-tooltip-checkbox>

參數說明

參數	說明	默認值
label	checkbox顯示的文本	空字符串
value	checkbox選中時的值（僅在多選框組中有效）	空字符串
width	checkbox的寬度，超出該寬度的文本會被隱藏，支持px和百分比設置	200px
v-model/checked	checkbox單獨使用時，控制是否選中	false
tooltipOption	tooltip的配置 - position，值和el-tooltip的placement屬性一致，設置提示框展示的位置， 默認top-start，即效果圖中的樣式