Vue + Vant 實現頂部關鍵字搜索欄

我們在做頁面開發時，有的時候一般在主頁的頂端會需要一個根據關鍵詞搜索框，如何實現呢，一起來看看：

 

<template></template>:

<section class="city-search">
  <van-icon class="search-icon" name="search" />
  <input  placeholder="請輸入城市關鍵字" v-model="KeyWord">
  <van-icon class="clear-icon" name="clear" v-show="KeyWord" @click="clearSearchInput" />
</section>

 

此時效果圖：

很明顯需要添加 CSS 美化。

 

CSS 如下：

.city-search {
    background-color: #F7F8FA;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 2.3rem;
    width: 94vw;
    margin: 2vw 4vw;
    border-radius: 8px;
    .search-icon {
      margin-left: 5px;
    }
    input {
      margin: 0 1.5vw;
      background-color: #F7F8FA;
      border: 0px;
      font-size: 14px;
      flex: 1
    }
    .clear-icon { color: #999;}
  }

 

添加方法：

data() {
  return {
    KeyWord: '',
  }
},

methods: {
  clearSearchInput() {
    this.KeyWord = '';
  }
}

 

此時界面如下：

           

 

我們可以看到，已經是一個相對美觀的布局了。