显示隐藏.gif

    1.  <div class="search">
    2.     <van-search placeholder="输入城市名或拼音" v-model="value"  @click="Click" />
    3.     <div :class="isShow?'cancel':'active'" @click="Click">
    4.          <p v-show="isShow">取消</p>
    5.     </div>
    6. </div>
    1. export default{
    2.   data(){
    3.     return{
    4.       isShow:false
    5.     }
    6.   },
    7.   methods:{
    8.     Click(){
    9.       this.isShow=!this.isShow;
    10.     }
    11.   }
    12. }
    1. .search {
    2.   height: 50px;
    3.   width:100%;
    4.   line-height: 30px;
    5.   position: relative;
    6.   padding: 10px 10px 0 30px;
    7.   background: #f4f4f4;
    8. }
    9. .van-search {
    10.   padding: 0;
    11.   width: 75%;
    12. }
    13. .active{
    14.    width: 60px;
    15.   height: 34px;
    16.   background: #fff;
    17.   position: absolute;
    18.   top: 10px;
    19.   right: 52px;
    20. }
    21. .van-search__content {
    22.   background: #fff;
    23. }
    24. .cancel {
    25.   display: inline-block;
    26.   width: 60px;
    27.   height: 30px;
    28.   position: absolute;
    29.   top: 12px;
    30.   right: 52px;
    31.   font-size: 20px;
    32. }