vue3实现渐近伸缩抽屉按钮

需求背景

需要实现一个伸缩抽屉的按钮展示，且字体需要出现渐近效果

解决效果

vue3实现渐近伸缩抽屉按钮

index.vue

<!--/**
   * @author: liuk
   * @date: 2023/8/21
   * @describe: 抽屉渐近显隐按钮
   * @email:[email protected]
  */-->
<template>
  <div class="building-floor-menu">
    <div :class="['building-floor-menu-item',item.select?'select':'']" v-for="item in setData" :key="item.name"
         @mouseenter="menuItemClick(item)" @mouseleave="item.select = false">
      <div class="inner-box">
        <div class="real-box">
          <div class="name">
            <span class="tit">{{ item.name }}</span>
            <span class="pos">{{ item.pos }}</span>
          </div>
          <div class="con">
            <div class="con-list">
              <p>
                <span class="temperature">{{ item.tem1 }}</span>°C
              </p>
              <span class="average">平均室温</span>
            </div>
            <div class="con-list">
              <p>
                <span class="temperature">{{ item.tem2 }}</span>户
              </p>
              <span class="average">过冷住户</span>
            </div>
            <div class="con-list">
              <p>
                <span class="temperature">{{ item.tem3 }}</span>户
              </p>
              <span class="average">过热住户</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";

const setData = ref([
  {
    name: '高区组名称',
    pos: "16F~22F",
    tem1: "20.1",
    tem2: 2,
    tem3: 3,
  }, {
    name: '中区组名称',
    pos: "16F~22F",
    tem1: "24.4",
    tem2: 2,
    tem3: 3,
  }, {
    name: '低区组名称',
    pos: "16F~22F",
    tem1: "23.7",
    tem2: 2,
    tem3: 3,
  },
])
const menuItemClick = (item) => {
  setData.value.forEach((x: any) => x.select = false)
  item.select = true
}
</script>
<style lang="scss" scoped>
.building-floor-menu {
  position: fixed;
  bottom: 30px;
  right: 700px;
  display: flex;

  .building-floor-menu-item {
    display: flex;
    flex-direction: column;
    width: 112px;
    height: 112px;
    padding: 12px;
    border: 1px solid transparent;
    background: rgba(38, 38, 38, 0.8);
    box-shadow: -10px 0px 22px 0px rgba(0, 0, 0, 0.22);
    border-radius: 4px;
    box-sizing: border-box;
    margin-right: 10px;
    user-select: none;
    transition: all 0.5s ease-in-out .3s;

    &.select {
      width: 250px;
      border: 1px solid #fff;

      .inner-box {
        width: 250px;
      }
    }

    .inner-box {
      width: 75px;
      overflow: hidden;
      transition: all 0.5s ease-in-out .3s;

      .real-box {
        width: 225px;

        .name {
          display: flex;
          justify-content: space-between;
          flex-wrap: nowrap;
          overflow: hidden;

          .tit {
            font-size: 14px;
            color: #FFFFFF;
            letter-spacing: 0;
            font-weight: 500;
          }

          .pos {
            font-size: 12px;
            color: #CCCCCC;
            letter-spacing: 0;
            font-weight: 400;
          }
        }

        .con {
          display: flex;
          justify-content: space-between;

          .con-list {
            width: 65px;
            height: 68px;
            margin-right: 13px;

            p {
              margin: 15px 0 5px;

              .temperature {
                font-size: 24px;
                color: #FFFFFF;
                letter-spacing: 0;
                line-height: 16px;
                font-weight: 400;
              }

              span {
                font-size: 12px;
                color: #CACACA;
                letter-spacing: 0;
                font-weight: 200;
              }
            }

            .average {
              opacity: 0.5;
              font-size: 12px;
              color: #FFFFFF;
              letter-spacing: 0;
              line-height: 16px;
              font-weight: 400;
            }
          }
        }
      }
    }
  }
}
</style>