CSS输入框动态伸缩动效

前言

• 下面我们将会做出如下图输入框样式，并且附上组件代码，有特殊需求的可以自行优化
• 同理，下拉框的话只要把el-input标签修改掉即可

MyInput组件

<template>
  <div class="my-input" @click.stop="showInput = !showInput">
    <i class="el-icon-search my-icon"></i>
    <!-- 注意：必须要加上  @click.native.stop 事件，不然会点击输入框也会出发父组件的点击事件-->
    <el-input
      class="my-input-iput"
      placeholder="请输入内容"
      v-model="input"
      clearable
      @click.native.stop
      :class="showInput ? 'show-input' : 'hidden-input'"
    >
    </el-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input: "",
      showInput: false,
    };
  },
  mounted() {
    window.addEventListener("click", this.hideInput);
  },
  beforeDestroy() {
    window.removeEventListener("click", this.hideInput);
  },
  methods: {
    hideInput() {
      if (!this.input) {
        this.showInput = false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.my-input {
  display: flex;
  align-items: center;
  height: 50px;
  overflow: hidden;
  padding: 0 10px;
  cursor: pointer;
  &:hover {
    background-color: #f5f7fa;
  }
}

.my-input-iput {
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  vertical-align: middle;
}

.show-input {
  width: 200px;
  margin-left: 10px;
}

.hidden-input {
  /* 这里必须写 0，不然宽度依然会占位 */
  width: 0;
}
</style>

应用组件

<template>
  <div class="test1">
    <MyInput />
  </div>
</template>
<script>
import MyInput from "@/components/MyInput.vue";

export default {
  components: {
    MyInput,
  },
};
</script>
<style lang="scss" scoped>
.test1 {
  height: 80vh;
  display: flex;
  /* justify-content: end; */
}
</style>