So implementieren Sie ein Suchfeld in VueJS

So implementieren Sie das Suchfeld in vuejs: 1. Erstellen Sie Komponenten des Logos und der Suchfeldteile. 3. Verwenden Sie „bus.$emit(“change“,index);“ das Ereignis auslösen und ihm Parameter übergeben.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Wie implementiert man das Suchfeld in vuejs?

Implementieren eines einfachen Suchfelds basierend auf Vue.js

Nachdem ich den Code gelesen habe, übe ihn noch einmal selbst: https://github.com/lavyun/ vue-demo -Suche

Das verwendete Hauptwissen ist sehr einfach, einfache Kenntnisse von vuejs2.0 reichen aus. Der Quellcode verwendet .vue zum Erstellen und ES6, Webpack-Paketierung usw. Da ich noch relativ unerfahren bin, werde ich zum Schreiben zunächst eine einfache .js verwenden.

Werfen wir zunächst einen Blick auf den Effekt

Hier gibt es zwei Komponenten, eine Komponente ist der Logo-Teil und die andere ist der Suchfeld-Teil.

html

html ist sehr einfach, es verweist nur auf zwei Komponenten.

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

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

logo

Zuerst wird das Bild der Suchmaschine angezeigt. Wenn Sie unten ein anderes Suchmaschinensymbol auswählen muss es entsprechend ändern. Also . Wenn Sie auf das umgekehrte Dreieck klicken, wird die Dropdown-Liste angezeigt.
Dann gibt es noch die Dropdown-Box. Wenn Sie einen Übergangseffekt erzielen möchten, müssen Sie ihn in eine Wenn Sie einen Hover-Effekt erzielen möchten, verwenden Sie datengesteuertes Denken. Dabei vergleichen Sie, ob Index und Hoverindex gleich sind. Wenn sie gleich sind, fügen Sie eine Klasse hinzu.

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

Dropdown-Feld

Die Eingabe muss in zwei Richtungen gebunden werden, also muss v-model="keyword" gebunden werden, und das Tastaturereignis @keyup muss gebunden werden. Wenn Sie die Eingabetaste drücken, suchen Sie , und wählen Sie die angegebene Option aus, wenn Sie nach unten oder oben gehen.
Das Detailfeld unten ähnelt der Dropdown-Liste
Wenn Sie suchen, verwenden Sie hauptsächlich $http.jsonp und auch die ES6-Syntax? Die Rückgabe scheint Promises .then() zu sein.

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

Das Problem der Kommunikation zwischen zwei Bruderkomponenten

Wenn Sie die Suchmaschine wechseln, muss durch die entsprechende Suchmaschine ersetzt werden. Hier müssen wir ein neues leeres Vue-Objekt als Mitte erstellen, da die beiden Komponenten nicht in einer Eltern-Kind-Beziehung stehen.

var bus = new Vue();

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

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

Achten Sie auf dieses Problem hier. Dies in $on weist auf Bus hin, daher müssen Sie dies speichern, um auf das Suchfeld zu verweisen.

Empfohlenes Lernen: „vue-Tutorial“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Suchfeld in VueJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!