Vue+Vantはトップ検索バーを実装します

<テンプレート>
  <section class="city-search">
    <van-icon class="search-icon" name="検索" />
    <input placeholder="ここに検索キーワードを入力してください" v-model="KeyWord">
    <van-icon class="clear-icon" name="clear" v-show="キーワード" @click="clearSearchInput" />
  </セクション>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
   データ（） {
        戻る {
            キーワード: ''、
        }
    },
    メソッド: {
        クリア検索入力() {
            this.KeyWord = '';
        }
    }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイル>
    .city-search {
        背景色: #F7F8FA;
        ディスプレイ: フレックス;
        コンテンツの配置: flex-start;
        アイテムの位置を中央揃えにします。
        高さ：2.3rem;
        幅：94vw;
        マージン: 2vw 4vw;
        境界線の半径: 8px;
    }
    .検索アイコン{
      左マージン: 5px;
    }
    入力{
      マージン: 0 1.5vw;
      背景色: #F7F8FA;
      境界線: 0px;
      フォントサイズ: 14px;
      フレックス: 1
    }
    .clear-icon { 色: #999;}
  
</スタイル>

<テンプレート>
  <div>
      <検索></検索>
        ホーム</div>
</テンプレート>
 
<スクリプト>
'@/components/SearchBar' から Search をインポートします。
エクスポートデフォルト{
   名前: "ホーム",
   コンポーネント:
      '検索': 検索、
    },
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイル>
 
</スタイル>