この記事では、参考までに、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: テーブルを開く際のMySQLスレッドの問題の解決方法
>>: VMware Workstation 14 Pro(仮想マシン)にシステムをインストールする方法の詳細な説明
上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...
背景画像でも、ページ上のテキストサイズでも、1 ピクセルの違いは非常に明白です。そして、私は学生時代...
この記事は主にMysql一時テーブルの原理と作成方法を紹介します。この記事のサンプルコードは非常に詳...
デバッグブランチプロジェクトの通常の開発中に、以前にリリースされたバージョンにバグがある場合がありま...
フォームを作成するときに、名前、携帯電話番号、出生地などの 2 つのフィールドを揃える状況に遭遇する...
はじめに: Web ページを作成するときに、画像をアップロードする必要がある場合がよくあります。画像...
メニューバーの例 1: コードをコピーコードは次のとおりです。 <!DOCTYPE html ...
次のコマンドを使用して、MySQL Serverがインストールされているかどうかを確認します。 [r...
webpack を使用してシングルページのプログラムを構築することは非常に一般的ですが、実際の開発で...
iframe の使い方:コードをコピーコードは次のとおりです。 <DIV align=cent...
目次同時シナリオ書き込む読む読む読み取り-書き込みと書き込み-読み取りMySQL のロック行レベルロ...
序文最良の方法は、あなたが思いつく最も速い方法ではないかもしれません。職場で一時的に使用するスクリプ...
Linux ではすべてがファイルなので、Android システム自体は Linux + Java だ...
ほとんどの場合、PC でファイルをアップロードするにはプラグインが使用され、フラッシュが導入されても...
公式 MySQL Web サイトから Ubuntu Linux 用の最新バージョンの MySQL を...