Bagaimana untuk melaksanakan kotak carian dalam vuejs

Cara melaksanakan kotak carian dalam vuejs: 1. Buat komponen logo dan bahagian kotak carian 2. Buat objek Vue kosong yang baharu 3. Gunakan "bus.$emit("change",index );" Hanya cetuskan peristiwa dan lulus parameter.

Persekitaran pengendalian artikel ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Bagaimana untuk melaksanakan kotak carian dalam vuejs?

Melaksanakan kotak carian ringkas berdasarkan Vue.js

Saya melihat latihan itu pada github, latih semula sendiri alamat asal dahulu : https://github.com/lavyun/vue-demo-search

Pengetahuan utama yang digunakan adalah sangat mudah, pengetahuan mudah tentang vuejs2.0 sudah memadai. Kod sumber menggunakan .vue untuk membina dan ES6, pembungkusan webpack dan sebagainya. Saya masih kurang berpengalaman, jadi saya akan menggunakan .js yang mudah untuk menulis dahulu.

Lihat kesannya dahulu

Ada dua komponen di sini, satu bahagian logo dan satu lagi bahagian kotak carian.

html

html sangat mudah, ia hanya merujuk kepada dua komponen.

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

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

logo

Mari kita menganalisisnya dahulu, Ia perlu responsif di sini Ya, jika anda memilih ikon enjin carian yang berbeza di bawah, anda perlu menukarnya dengan sewajarnya. Jadi . Apabila diklik pada segi tiga terbalik belakang, senarai juntai bawah
Kemudian terdapat kotak drop-down. Jika anda ingin mempunyai kesan peralihan, anda perlu membungkusnya dalam Jika anda ingin mempunyai kesan hover, gunakan pemikiran terdorong data, iaitu membandingkan sama ada indeks dan hoverindex adalah sama, dan jika ia sama, tambahkan kelas.

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

Kotak lungsur

Input perlu diikat dalam dua arah, jadi v-model="kata kunci" mesti juga terikat. Acara papan kekunci @keyup, jika anda menekan enter, carian akan dilakukan dan senarai maklumat pemulangan yang diberikan akan dipilih apabila turun atau naik.
Kotak butiran di bawah adalah serupa dengan senarai lungsur turun Jika anda mencari, anda terutamanya menggunakan $http.jsonp, dan juga menggunakan sintaks ES6? Sandaran nampaknya adalah Promise's .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;
 })
 }
})

Masalah komunikasi antara dua komponen bersaudara

Jika anda menukar enjin carian, digantikan dengan satu enjin carian yang sepadan. Di sini kita perlu mencipta objek Vue kosong baharu sebagai tengah, kerana kedua-dua komponen itu tidak berada dalam hubungan ibu bapa-anak.

var bus = new Vue();

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

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

Beri perhatian kepada masalah ini di sini di $on titik ke bas, jadi anda perlu menyimpannya ke panel carian rujukan.

Pembelajaran yang disyorkan: "vue. tutorial 》

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kotak carian dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!