Comment implémenter le champ de recherche dans vuejs

Comment implémenter le champ de recherche dans vuejs : 1. Créez les composants du logo et du champ de recherche ; 2. Créez un nouvel objet Vue vide ; 3. Utilisez "bus.$emit("change",index);" déclencher l'événement et lui transmettre des paramètres.

L'environnement d'exploitation de cet article : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Comment implémenter le champ de recherche dans vuejs ?

Implémentation d'un champ de recherche simple basé sur Vue.js

J'ai vu les exercices sur github Après avoir lu le code, répétez-le vous-même. Mettez d'abord l'adresse d'origine : https://github.com/lavyun/. vue-demo -Search

Les principales connaissances utilisées sont très simples, une simple connaissance de vuejs2.0 suffit. Le code source utilise .vue pour construire et ES6, l'empaquetage webpack, etc. Je suis encore relativement inexpérimenté, je vais donc d'abord utiliser un simple .js pour écrire.

Jetons d'abord un coup d'œil à l'effet

Il y a deux composants ici, un composant est la partie logo et l'autre est la partie champ de recherche.

html

html est très simple, il fait simplement référence à deux composants.

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

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

logo

Analysons-le d'abord. Tout d'abord, un affiche l'image du moteur de recherche. Il doit être réactif ici. il faudra le changer en conséquence. Donc . Lorsque vous cliquez sur le triangle inversé à l'arrière, la liste déroulante
Ensuite, il y a la liste déroulante. Si vous souhaitez avoir un effet de transition, vous devez l'envelopper dans un Si vous souhaitez avoir un effet de survol, utilisez une réflexion basée sur les données, qui consiste à comparer si l'index et le hoverindex sont égaux, et s'ils sont égaux, ajoutez une classe.

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;
 }  
 }
});

Boîte déroulante

L'entrée doit être liée dans deux directions, donc v-model="keyword" doit être lié et l'événement clavier @keyup doit être lié. Si vous appuyez sur Entrée, recherchez. , et sélectionnez celui donné en descendant ou en montant la liste d'informations de retour.
La zone de détails ci-dessous est similaire à la liste déroulante
Si vous effectuez une recherche, vous utilisez principalement $http.jsonp, et utilisez également la syntaxe ES6 ? La solution de secours semble être le .then() de Promise.

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;
 })
 }
})

Le problème de communication entre deux composants frères

Si vous changez de moteur de recherche, Ici, nous devons créer un nouvel objet Vue vide au milieu, car les deux composants ne sont pas dans une relation parent-enfant.

var bus = new Vue();

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

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

Faites attention à ce problème ici. Ceci dans $on points to bus, vous devez donc l'enregistrer dans le panneau de recherche de référence.

Apprentissage recommandé : "tutoriel vue"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!