需求背景
需要实现一个伸缩抽屉的按钮展示，且字体需要出现渐近效果
解决效果
vue3实现渐近伸缩抽屉按钮
index.vue
<!--/*** @author: liuk* @date: 2023/8/21* @describe: 抽屉渐近显隐按钮* @email:1229223630@qq.com*/-->
<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>
)
)
