前言
下面我们将会做出如下图输入框样式,并且附上组件代码,有特殊需求的可以自行优化 同理,下拉框的话只要把el-input
标签修改掉即可
MyInput组件
< template> < div class = " my-input" @click.stop = " showInput = !showInput" > < i class = " el-icon-search my-icon" > </ i> < el-inputclass = " my-input-iput" placeholder = " 请输入内容" v-model = " input" clearable @click.native.stop :class = " showInput ? 'show-input' : 'hidden-input'" > </ el-input> </ div>
</ template>
< script> javascript">
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 > css">
.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 { width : 0;
}
</ style>
应用组件
< template> < div class = " test1" > < MyInput /> </ div>
</ template>
< script> javascript">
import MyInput from "@/components/MyInput.vue " ; export default { components : { MyInput, } ,
} ;
</ script>
< style lang = " scss " scoped > css">
.test1 { height : 80vh; display : flex;
}
</ style>