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，即效果图中的样式