vuejsで検索ボックスを実装する方法

vuejs で検索ボックスを実装する方法: 1. ロゴと検索ボックス部分のコンポーネントを作成します; 2. 新しい空の Vue オブジェクトを作成します; 3. "bus.$emit("change",index を使用します) );" イベントをトリガーしてパラメータを渡すだけです。

この記事の動作環境: Windows 7 システム、vue バージョン 2.9.6、DELL G3 コンピューター。

vuejs で検索ボックスを実装するにはどうすればよいですか?

Vue.js をベースにしたシンプルな検索ボックスの実装

github で演習を拝見しました。コードを読んだ後、自分でもう一度練習してください。元のアドレスを先にします: https://github.com/lavyun/vue-demo-search

使用する主な知識は非常に単純で、vuejs2.0 の簡単な知識で十分です。ソースコードはビルドに .vue を使用し、ES6、webpack パッケージ化などを使用します。私はまだ経験が浅いので、最初は簡単な .js を使用して記述します。

最初にエフェクトを見てください

ここには 2 つのコンポーネントがあり、1 つはロゴ部分、もう 1 つは検索ボックス部分です。

html

html は非常にシンプルで、2 つのコンポーネントを参照するだけです。

<p id="app">
 <logo-picture></logo-picture>
 <search-panel></search-panel>
</p>

//js还要实例#app
var app = new Vue({
 el: "#app"
})

logo

まずは分析しましょう。まず、 に検索エンジンの画像が表示されます。以下で別の検索エンジン アイコンを選択した場合は、それに応じてアイコンを変更する必要があります。したがって、 となります。背面の逆三角形をクリックすると、ドロップダウン リスト が表示されます。
次に、ドロップダウン ボックスがあります。トランジション効果を持たせたい場合は、それを ホバー効果を持たせたい場合は、データ駆動型の考え方を使用します。つまり、index と hoverindex が等しいかどうかを比較し、等しい場合はクラスを追加します。

Vue.component('logo-picture',{
 template :' \
 <p class="main-logo">\
 <img :src="items[now].src" @click="toggleFlag"/>\
 <span @click="toggleFlag" class="logoList-arrow"> </span>\
 <transition-group tag="ul" v-show="flagShow" class="logoList">\
 <li v-for="(item,index) in items" :key="index" @click="changeFlag(index)" @mouseover="flagHover(index)" :class="{selectback: index == hoverindex}">\
 <img :src="item.src" />\
 </li>\
 </transition>\
 </p>&#39;,
 data: function() {
 return {
 items: [{src:&#39;../src/assets/360_logo.png&#39;},{src:&#39;../src/assets/baidu_logo.png&#39;},{src:&#39;../src/assets/sougou_logo.png&#39;}],
 now: 0,
 flagShow: false,
 hoverindex: -1 
 }
 },
 methods: {
 //显示隐藏图片列表
 toggleFlag: function() {
 this.flagShow = !this.flagShow;
 },
 //改变搜索引擎
 changeFlag: function(index) {
 this.now = index;
 this.flagShow = false;
 bus.$emit("change",index);
 },
 //li hover
 flagHover: function(index) {
 this.hoverindex = index;
 }  
 }
});

ドロップダウン ボックス

入力は 2 方向にバインドする必要があるため、v-model="keyword" をバインドする必要があります。 @keyup で Enter キーを押すと検索が行われ、下または上に移動すると、指定された返される情報リストが選択されます。
下の詳細ボックスは、 ドロップダウン リストに似ています。
検索する場合、主に $http.jsonp を使用し、ES6 構文も使用しますか?フォールバックは Promise の .then() のようです。

Vue.component('search-panel',{
 template:'\
 <p class="search-input">\
 <input v-model="search" @keyup="get($event)" @keydown.enter="searchInput()" @keydown.down="selectDown()" @keydown.up.prevent="selectUp()"/>\
 <span @click="clearInput()" class="search-reset">&times;</span>\
 <button @click="searchInput()" class="search-btn">搜一下</button>\
 <p class="search-select">\
 <transition-group tag="ul" mode="out-in">\
 <li v-for="(value,index) in myData" :class="{selectback:index==now}" :key="index" @click="searchThis" @mouseover="selectHover(index)" class="search-select-option search-select-list">\
  {{value}}\
 </li>\
 </transition-group>\
 </p>\
 </p>&#39;,
 data: function() {
 return {
 search: &#39;&#39;,
 myData: [],
 flag: 0,
 now: -1,
 logoData: [
 {
  &#39;name&#39;: "360搜索",
  searchSrc: "https://www.so.com/s?ie=utf-8&shb=1&src=360sou_newhome&q="
 },
 {
  &#39;name&#39;: "百度搜索",
  searchSrc: "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd="
 },
 {
  &#39;name&#39;: "搜狗搜索",
  searchSrc: "https://www.sogou.com/web?query="
 }
 ]
 }
 },
 methods: {
 get: function(event) {
 if(event.keyCode == 38 || event.keyCode == 40){ //向上向下
 return ;
 }
 this.$http.jsonp(&#39;https://sug.so.360.cn/suggest?word=&#39; + this.search + &#39;&encodein=utf-8&encodeout=utf-8&#39;).then(function(res) {
 this.myData = res.data.s;

 }, function() {

 });
 },
 //清除内容
 clearInput: function() {
 this.search = &#39;&#39;;
 this.get();
 },
 //搜索
 searchInput: function() {
 alert(this.flag)
 window.open(this.logoData[this.flag].searchSrc+this.search);
 },
 //搜索的内容
 searchThis: function(index) {
 this.search = this.myData[index];
 this.searchInput();
 },
 //li hover
 selectHover: function(index) {
 this.search = this.myData[index];
 this.now = index;
 },
 //向下
 selectDown: function() {
 this.now++;
 if(this.now == this.myData.length) {
 this.now = 0;
 }
 this.search = this.myData[this.now];
 },
 //向上
 selectUp: function() {
 this.now--;
 if(this.now == -1) {
 this.now = this.myData.length - 1;
 }
 this.search = this.myData[this.now];
 }
 },
 created: function() { //通信
 var self = this;
 bus.$on(&#39;change&#39;,function(index) {
 self.flag = index;
 })
 }
})

2 つの兄弟コンポーネント間の通信の問題

検索エンジンを変更する場合、 を次のように置き換える必要があります。対応する検索エンジン。 2 つのコンポーネントは親子関係にないため、ここでは中間として新しい空の Vue オブジェクトを作成する必要があります。

var bus = new Vue();

//logo-picture里触发事件，并传递参数
bus.$emit("change",index);

//search-panel里监听事件是否发生
var self = this;
bus.$on('change',function(index) {
 self.flag = index;
})

ここでこの問題に注意してください。$on のこれはバスを指しているため、これを参照検索パネルに保存する必要があります。

推奨される学習: 「vue チュートリアル#」 ##"

以上がvuejsで検索ボックスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。