如何使用 Vue 和 Element-Plus 实现输入框聚焦时下拉按钮消失动画效果？

Question

我想实现掘金网站输入框的效果

• 当我聚焦输入框的时候，旁边的下拉按钮消失，输入框变长占据下拉框的位置。
• 取消聚焦的时候，恢复原状

未聚焦

聚焦

尝试用vue + element-plus实现，并没有实现这种动画效果，只是简单的占据空间
stackblitz

<script setup>
import HelloWorld from './components/HelloWorld.vue';
import { ref, computed } from 'vue';
const isFocus = ref(false);
const basis = computed(() => {
  return isFocus.value ? 'flex-full' : 'flex-60';
});
</script>

<template>
  <div class="flex justify-between w-md">
    <el-form :class="basis" class="transition">
      <el-form-item class="mb-0">
        <el-input
          placeholder="搜索"
          @focus="isFocus = true"
          @blur="isFocus = false"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-dropdown v-show="!isFocus" split-button type="primary" class="flex-40">
      创作者中心
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>Action 1</el-dropdown-item>
          <el-dropdown-item>Action 2</el-dropdown-item>
          <el-dropdown-item>Action 3</el-dropdown-item>
          <el-dropdown-item>Action 4</el-dropdown-item>
          <el-dropdown-item>Action 5</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style scoped>
.transition {
  transition: width 2s ease-in;
}
.grow {
  flex-grow: 1;
}
.flex-full {
  flex-basis: 100%;
}
.flex-60 {
  flex-basis: 60%;
}
.flex-40 {
  flex-basis: 40%;
}
.mb-0 {
  margin-bottom: 0px !important;
}
.flex {
  display: flex;
  background: red;
}
.gap-sm {
  gap: 2px;
}
.justify-between {
  justify-content: space-between;
}
.w-md {
  width: 350px;
}
</style>

附：我感觉使用组件库虽然省事但是也会有很多的限制，可能我现在还没有活用这些组件库。

Answer 1

因为你使用的是 flex 布局，进行伸缩的时候并不只是 width 宽度。

.transition {
-  transition: width 2s ease-in;
+  transition: all 2s ease-in;
}

给你大概改了一个Demo 👉 Element Plus Playground

<script setup>
import { ref, computed } from 'vue';
const isFocus = ref(false);
</script>

<template>
  <div :class="['flex', 'justify-between', 'w-md', 'box', isFocus ? 'hidden' : 'show']">
    <el-form class="flex-full my-form">
      <el-form-item>
        <el-input
          placeholder="搜索"
          @focus="isFocus = true"
          @blur="isFocus = false"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-dropdown split-button type="primary" class="my-dropdown">
      创作者中心
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>Action 1</el-dropdown-item>
          <el-dropdown-item>Action 2</el-dropdown-item>
          <el-dropdown-item>Action 3</el-dropdown-item>
          <el-dropdown-item>Action 4</el-dropdown-item>
          <el-dropdown-item>Action 5</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style scoped>
.box {
  overflow-x: hidden;
  padding-right: 145px;
  transition: padding 1s;
  box-sizing: border-box;
  position: relative;
}
.box.hidden {
  padding-right: 0;
}
.box.hidden .my-dropdown {
  transform: translateX(100%);
  opacity: 0
}

.my-dropdown {
  width: 135px;
  flex: 0 0 auto;
  position: absolute;
  right: 0;
  transition: transform 1s, opacity .4s;
}
.grow {
  flex-grow: 1;
}
.flex-full {
  flex-basis: 100%;
}
.flex-60 {
  flex-basis: 60%;
}
.flex-40 {
  flex-basis: 40%;
}
.mb-0 {
  margin-bottom: 0px !important;
}
.flex {
  display: flex;
}
.gap-sm {
  gap: 2px;
}
.justify-between {
  justify-content: space-between;
}
.w-md {
  width: 350px;
}
</style>