css - 文本溢出效果 - 溢出省略选中或hover全显

css - 文本溢出效果 - 溢出省略选中或hover全显

要求

文本溢出

1. 显示...
2. 鼠标移入项和当前激活项显示全部

实现

flex-shrink

预览

<template>
  <!-- 表格页，用途行 -->
  <div class="credit_card_use">
    <div class="use_list">
      <!-- 
            1. 用途项
                1. 溢出
                    1. 显示...
                    2. 鼠标移入项和当前激活项显示全部            
         -->
      <el-button
        @click="current = i"
        class="use_list_item"
        :class="{ active: current == i }"
        :type="current !== i ? '' : 'primary'"
        v-for="(v, i) in useList"
        :key="i"
        >{{ v.label }}</el-button
      >
    </div>
    <el-tooltip
      class="tooltip"
      :offset="-10"
      v-if="useExplain"
      effect="dark"
      placement="bottom-start"
    >
      <ul slot="content">
        <li v-for="(m, n) in useExplain" :key="n">{{ m }}</li>
      </ul>
      <i class="el-icon-question"></i>
    </el-tooltip>
    <div class="use_methods">
      <el-button
        class="use_method_item"
        type="primary"
        plain
        v-for="(v, i) in methods"
        :key="i"
        >{{ v.label }}</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: 0,
      useExplain: [
        '统计数据显示规则为“批次数量-批次下案件总数',
        '量、无批次案件数量丨该用途下案件总数量”，',
        '如：消费（3-7、2丨9）',
      ],
      useList: [
        {
          label: '消费 (4-1220、5丨1215)',
        },
        {
          label: '取现(2-680、20丨700)',
        },
        {
          label: '储蓄(2-450、50丨500)',
        },
        {
          label: '分期付款(3-480、20丨500)',
        },
        {
          label: '小额融资(3-900、100丨1000)',
        },
        {
          label: '资信凭证(50-2700、30丨3000',
        },
      ],
      methods: [
        {
          label: '分配案件',
        },
        {
          label: '撤销案件',
        },
        {
          label: '查看详情',
        },
      ],
    };
  },
};
</script>
 
<style lang="scss" scoped>
@import '~@/assets/scss/variable';
.credit_card_use {
  @include flexXY();
  height: 55px;
  padding: 15px 15px 8px 17px;
  .use_list {
    @include flexXY($x: flex-start);
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    .use_list_item {
      @include text_ellipsis();
      $radius-size: 4px;
      padding-top: initial;
      padding-bottom: initial;
      height: 32px;
      border-radius: initial;
      flex-shrink: 1;
      &:hover,
      &.active {
        text-overflow: initial;
        flex-shrink: 0;
      }
      &:first-child {
        border-top-left-radius: $radius-size;
        border-bottom-left-radius: $radius-size;
      }
      &:last-child {
        border-top-right-radius: $radius-size;
        border-bottom-right-radius: $radius-size;
      }
      & + .use_list_item {
        margin-left: initial;
        border-left-width: 0px;
      }
    }
  }
  .tooltip {
    color: #bfbfbf;
    margin: 0 8px;
    font-size: 16px;
  }
  .use_methods {
    @include flexXY($x: flex-start, $y: stretch);
    .use_method_item {
      height: 32px;
      padding-top: initial;
      padding-bottom: initial;
    }
  }
}
</style>

width（效果不佳）

  • 存在问题
    • 效果卡顿，不流畅
    • 项数量少时，宽度异常
    • 特殊情况闪屏
      • 项数量少时鼠标移入取消宽度可能会使鼠标不在内容区域，导致频繁hover切换闪屏

<template>
  <!-- 表格页，用途行 -->
  <div class="credit_card_use">
    <div class="use_list">
      <!-- 
            1. 用途项
                1. 溢出
                    1. 显示...
                    2. 鼠标移入项和当前激活项显示全部            
         -->
      <el-button
        @click="current = i"
        class="use_list_item"
        :class="{ active: current == i }"
        :style="{ width: `calc(100% / ${useList.length})` }"
        :type="current !== i ? '' : 'primary'"
        v-for="(v, i) in useList"
        :key="i"
        >{{ v.label }}</el-button
      >
    </div>
    <el-tooltip
      class="tooltip"
      :offset="-10"
      v-if="useExplain"
      effect="dark"
      placement="bottom-start"
    >
      <ul slot="content">
        <li v-for="(m, n) in useExplain" :key="n">{{ m }}</li>
      </ul>
      <i class="el-icon-question"></i>
    </el-tooltip>
    <div class="use_methods">
      <el-button
        class="use_method_item"
        type="primary"
        plain
        v-for="(v, i) in methods"
        :key="i"
        >{{ v.label }}</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: 0,
      useExplain: [
        '统计数据显示规则为“批次数量-批次下案件总数',
        '量、无批次案件数量丨该用途下案件总数量”，',
        '如：消费（3-7、2丨9）',
      ],
      useList: [
        {
          label: '消费 (4-1220、5丨1215)',
        },
        {
          label: '取现(2-680、20丨700)',
        },
      ],
      methods: [
        {
          label: '分配案件',
        },
        {
          label: '撤销案件',
        },
        {
          label: '查看详情',
        },
      ],
    };
  },
};
</script>
 
<style lang="scss" scoped>
@import '~@/assets/scss/variable';
.credit_card_use {
  @include flexXY();
  height: 55px;
  padding: 15px 15px 8px 17px;
  .use_list {
    @include flexXY($x: flex-start);
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    .use_list_item {
      @include text_ellipsis();
      $radius-size: 4px;
      padding-top: initial;
      padding-bottom: initial;
      height: 32px;
      border-radius: initial;
      &:hover,
      &.active {
        width: initial !important;
        text-overflow: initial;
      }
      &:first-child {
        border-top-left-radius: $radius-size;
        border-bottom-left-radius: $radius-size;
      }
      &:last-child {
        border-top-right-radius: $radius-size;
        border-bottom-right-radius: $radius-size;
      }
      & + .use_list_item {
        margin-left: initial;
        border-left-width: 0px;
      }
    }
  }
  .tooltip {
    color: #bfbfbf;
    margin: 0 8px;
    font-size: 16px;
  }
  .use_methods {
    @include flexXY($x: flex-start, $y: stretch);
    .use_method_item {
      height: 32px;
      padding-top: initial;
      padding-bottom: initial;
    }
  }
}
</style>

variable.scss

// variable.scss
@mixin flexXY($x:space-between, $y:center) {
    display: flex;
    justify-content: $x;
    align-items: $y;
}
 
@mixin text_ellipsis() {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
posted @   zc-lee  阅读(561)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
AI IDE Trae