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-inputclass="my-input-iput"placeholder="请输入内容"v-model="input"[e-mail]: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>