效果图
默认状态
鼠标悬浮时 缓慢展示完整内容
实现方法
方法一
使用max-width,当鼠标悬浮时，设置max-width为一个足够大的数值
<div class="flex justify-center align-center mt-20px">
<div v-for="(item, key) in ssoList" :key="key" class="ssoBtn flex ml-20px">
<Icon size="28" :icon="getSSOIcon(item)" color="#CB3F21" />
<div class="title"> {{ item.appName }}</div>
</div>
</div>.ssoBtn {
max-width: 48px;
height: 48px;
padding: 9px;
line-height: 30px;
border-radius: 24px;
border: 1px solid #e6e9f0;
color: #262e43;
cursor: pointer;
transition: all 1s;
overflow: hidden;
}
.title {
display: block;
white-space: nowrap;
margin-left: 12px;
}
.ssoBtn:hover {
max-width: 400px;
}
.ssoBtn + .ssoBtn {
margin-left: 20px;
}方法二
鼠标悬浮时计算出当前元素的宽度 重新赋值，鼠标失焦时恢复默认宽度
-
html
<div v-for="(line, lkey) in ssoList" :key="lkey">
<div class="flex justify-center align-center mt-20px">
<div
v-for="(item, key) in line"
:key="key"
class="ssoBtn flex"
@mouseenter="calBtnWidth"
@mouseleave="clearBtnWidth"
@click="handleSSOLogin(item)"
>
<Icon size="28" :icon="getSSOIcon(item)" color="#CB3F21" />
<div class="title"> {{ t('login.sso.loginWithAPP', { app: item.appName }) }}</div>
</div>
</div>
</div>-
ts
calBtnWidthCount值是为了只保证只在鼠标刚聚焦上时计算，防止失焦前重复计算（大概是这个原因，好久前的代码，已经忘记为什么要加一个判断了）
<script lang="ts" setup>
const ssoBtnWidth = ref('48px')
const calBtnWidthCount = ref(1)
const calBtnWidth = (e) => {
const scrollWidth = e.target.scrollWidth
if (calBtnWidthCount.value === 1) {
console.log('==========', e.target.scrollWidth)
ssoBtnWidth.value = scrollWidth + 'px'
calBtnWidthCount.value++
}
}
const clearBtnWidth = () => {
calBtnWidthCount.value = 1
}
</script>- css
.ssoBtn {
width: 48px;
height: 48px;
padding: 9px;
line-height: 30px;
border-radius: 24px;
border: 1px solid #e6e9f0;
color: #262e43;
cursor: pointer;
transition: all 1s;
overflow: hidden;
}
.title {
display: block;
white-space: nowrap;
margin-left: 12px;
}
.ssoBtn:hover {
width: v-bind(ssoBtnWidth);
}
.ssoBtn + .ssoBtn {
margin-left: 20px;
}
