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

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

この記事では、参考までに、Vue+Vant のトップ検索バーを実装するための具体的なコードを紹介します。具体的な内容は次のとおりです。

検索バー コンポーネントのソース コード (SearchBar.vue)

<テンプレート>
  <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" 属性を追加します -->
<スタイル>
 
</スタイル>

エフェクトのスクリーンショット:

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue elementuiは、検索バーのパブリックコンポーネントのカプセル化のサンプルコードを実装します。

<<:  テーブルを開く際のMySQLスレッドの問題の解決方法

>>:  VMware Workstation 14 Pro(仮想マシン)にシステムをインストールする方法の詳細な説明

推薦する

表のセル間の境界線/区切り線を非表示にする方法

上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...

WEB 標準ウェブページ構造

背景画像でも、ページ上のテキストサイズでも、1 ピクセルの違いは非常に明白です。そして、私は学生時代...

Mysql一時テーブルの原理と作成方法の分析

この記事は主にMysql一時テーブルの原理と作成方法を紹介します。この記事のサンプルコードは非常に詳...

Git サーバーを使用してデバッグ ブランチを表示し、修正する方法を 1 日 1 分で学習します。

デバッグブランチプロジェクトの通常の開発中に、以前にリリースされたバージョンにバグがある場合がありま...

CSS テキスト配置実装コード

フォームを作成するときに、名前、携帯電話番号、出生地などの 2 つのフィールドを揃える状況に遭遇する...

写真のプレビューとアップロード機能を実現するhtml+css+js

はじめに: Web ページを作成するときに、画像をアップロードする必要がある場合がよくあります。画像...

2つのシンプルなメニューナビゲーションバーの例

メニューバーの例 1: コードをコピーコードは次のとおりです。 <!DOCTYPE html ...

Centos 6.5 での mysql-community-server. 5.7.18-1.el6 のインストール

次のコマンドを使用して、MySQL Serverがインストールされているかどうかを確認します。 [r...

Webpackを使用して複数ページのプログラムを構築するための実装手順

webpack を使用してシングルページのプログラムを構築することは非常に一般的ですが、実際の開発で...

iframe を使用して Web ページに他の Web ページを埋め込む方法

iframe の使い方:コードをコピーコードは次のとおりです。 <DIV align=cent...

MySQL トランザクション分離はどのように実現されますか?

目次同時シナリオ書き込む読む読む読み取り-書き込みと書き込み-読み取りMySQL のロック行レベルロ...

バッチファイルを処理するLinuxの1行コマンドの詳細な説明

序文最良の方法は、あなたが思いつく最も速い方法ではないかもしれません。職場で一時的に使用するスクリプ...

ファイル書き込みを使用して Linux アプリケーションをデバッグする方法

Linux ではすべてがファイルなので、Android システム自体は Linux + Java だ...

モバイルでのHTML5経由のファイルアップロード

ほとんどの場合、PC でファイルをアップロードするにはプラグインが使用され、フラッシュが導入されても...

MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)

公式 MySQL Web サイトから Ubuntu Linux 用の最新バージョンの MySQL を...