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(仮想マシン)にシステムをインストールする方法の詳細な説明

推薦する

JSアルバム画像の揺れと拡大表示効果のサンプルコード

前回の記事では、JS を使って簡単な揺れ効果を実現する方法を紹介しました。ご興味があればクリックして...

Vue で rem 適応を使用する方法

1. 開発環境vue 2. コンピュータシステム Windows 10 Professional E...

CSS3はトランジション効果を実現するためにtransitionプロパティを使用する。

物件の詳細な説明transition 属性の目的は、一部の CSS プロパティ (背景など) をスム...

Vue のスロットスコープの詳細な理解(初心者向け)

Baidu には slot-scope に関する記事が既にたくさんありますが、以前よく学習しておら...

HTML の順序付きリスト、順序なしリスト、定義リストに関する簡単な説明

順序付きリストXML/HTML コードコンテンツをクリップボードにコピー<オルタイプ= &qu...

マウスを置いたときに半透明効果のテキスト説明を実現するための純粋な CSS (初心者は必読)

効果は以下のとおりです。 例1 例2:例1[結婚式の計画]を例にとるHTML: <div cl...

CentOS6 アップグレード glibc 操作手順

目次背景glibc 2.14をコンパイルするソフトリンクを変更するやっと背景テスト環境には Cent...

Windows10 mysql 8.0.12 非インストール版 設定 起動方法

この記事では、MySQL 8.0.12のインストールされていないバージョンを設定して起動するための具...

jsを使用して簡単なスネークゲームを書く

この記事では、参考までに、jsで書かれたシンプルなスネークゲームの具体的なコードを紹介します。具体的...

MySQL における int の最大値の詳細な説明

導入2日前に見た問題について詳細に書きます。バイトコンピューターがバイナリに基づいていることは誰もが...

Vueの最初のレンダリングのプロセス全体についての簡単な説明

目次1. Vueの初期化vue エントリ ファイルフルバージョンとランタイムバージョンの違い1.1、...

CentOS に PHP5 をインストール、PHP をアンインストール、PHP7 をインストールするチュートリアル

まず、PHP5をインストールするのはとても簡単ですyum install php PHP5 を使用し...

React + Threejs + Swiper パノラマ効果を実現するための完全なコード

パノラマビュー効果を見てみましょう: 住所を表示スクリーンショット: 体験してみると、周囲の環境がぐ...

Dockerでmongodbデータベースを使用するための実装コード

mongoイメージを取得する sudo docker pull mongo mongodbサービスを...

優れた登録プロセスの手順

ウェブサイトにとって、これは最も基本的な機能です。それでは、登録プロセスに含まれる手順を見てみましょ...