点击搜索框动画变长,搜索框有内容不变,无内容失去焦点,变回原来模样。< div : class = "type == true ? 's_r_z' : 's_r'" @click= "onChange" > < div class = "input_s" > < input @blur= "handleBlur" v- model= "input" required placeholder= "请输入关键词搜索" / > < / div> < img src= "../../../../assets/images/v_15.png" / > < / div> mounted ( ) { window. addEventListener ( 'click' , this . handleClickOutside) ; } , beforeDestroy ( ) { window. removeEventListener ( 'click' , this . handleClickOutside) ; } , methods : { handleClickOutside ( event ) { if ( ! this . $el. contains ( event. target) && this . type && this . input == '' ) { this . type = false ; } } , onChange ( ) { this . type = true } ,
} . s_r { display : flex; width : 62px; height : 30px; background : #E3F1FF ; border- radius: 20px; cursor : pointer; margin : 0px 0px 0px 30px; margin- top: - 7px; transition : all 1s ease- in - out; - webkit- transition: width 1s; img { width : 20px; height : 20px; position : relative; left : 20px; top : 5px; } input { display : none; } } . s_r_z { display : flex; justify- content: center; align- items: center; width : 240px; height : 30px; background : #E3F1FF ; border- radius: 20px; border : 1px solid #258DEC; animation : kx 0 . 5s; margin : 0px 0px 0px 30px; margin- top: - 8px; img { width : 20px; height : 20px; } input { outline- style: none; border : none; background- color: #E3F1FF ; animation : zk 1s; } } @keyframes kx { 0 % { width : 0px} 100 % { width : 240px; } } @keyframes zk { 0 % { width : 0px} 100 % { width : 200px; } }