el-select 下拉框超出宽度封装tooltip

最新推荐文章于 2024-06-13 15:53:35 发布

RenBaiLi

最新推荐文章于 2024-06-13 15:53:35 发布

阅读量1k

点赞数

分类专栏： js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/renbaili/article/details/126932919

版权

js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

<template>
  <el-tooltip
    ref="tlp"
    :content="text"
    effect="dark"
    :disabled="!tooltipFlag"
    :placement="placement"
    class="tooltip"
  >
    <div
      class="tooltip-wrap"
      @mouseenter="handleTooltipIn($event)"
      @mouseleave="handleTooltipOut($event)"
    >{{ text }}</div>
  </el-tooltip>
</template>
<script>
export default {
  name: 'EllipsisTooltip',
  props: {
    // 字符内容
    text: {
      type: String,
      default: '',
    },
    // tooltip显示位置
    placement: {
      type: String,
      default: 'top-start',
    },
  },
  data() {
    return {
      tooltipFlag: false, // 是否显示tooltip
    }
  },
  mounted() {},
  methods: {
    handleTooltipIn(event) {
      // scrollWidth: 对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
      // offsetWidth对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。
      this.tooltipFlag = event.target.scrollWidth > event.target.offsetWidth
    },
    handleTooltipOut(event) {
      this.tooltipFlag = false
    },
  },
}
</script>
<style>
.tooltip-wrap {
  width: 100%;
  /*文本不换行*/
  white-space: nowrap;
  overflow: hidden;
  /*文字超出用省略号*/
  text-overflow: ellipsis;
}
</style>

import Tooltip from '@/xxx/xxx/xxx.vue';

       <el-select class="el-selects" popper-class="select_width" clearable size="mini" v-model="value" placeholder="检测批号">
            <el-option
              v-for="item in option1"
              :key="item.id"
              :label="item.pipelineTagnumber"
              :value="item.id">
              <Tooltip :text="item.pipelineTagnumber">{{ item.pipelineTagnumber }}</Tooltip>
            </el-option>
          </el-select>