效果图

默认状态

鼠标悬浮时 缓慢展示完整内容

实现方法

方法一

     使用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;
}