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 e431342b2894783f54b33740f33c93c1. Wenn Sie auf das umgekehrte Dreieck klicken, wird die Dropdown-Liste 914942ce123cf770f7ea92723ad87555 angezeigt.
Dann gibt es noch die Dropdown-Box. Wenn Sie einen Übergangseffekt erzielen möchten, müssen Sie ihn in eine 3c7696b270dfcb3df80bb32095149606
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

fd098b03a0046905b4f34a14f2cba3c4Wenn Sie die Suchmaschine wechseln, muss 04a43090e6cbf1462a77fdb864c1f813 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!