집 >웹 프론트엔드 >View.js >vuejs에서 검색창을 구현하는 방법

vuejs에서 검색창을 구현하는 방법

藏色散人원래의: 2021-09-24 14:46:215438검색

vuejs에서 검색 상자를 구현하는 방법: 1. 로고 및 검색 상자 부분의 구성 요소를 만듭니다. 2. 새로운 빈 Vue 개체를 만듭니다. 3. "bus.$emit("change",index);"를 사용합니다. 이벤트를 트리거하고 매개변수에 전달합니다.

이 기사의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

vuejs에서 검색창을 구현하는 방법은 무엇인가요?

Vue.js 기반의 간단한 검색창 구현하기

코드를 읽은 후 직접 다시 연습해 보세요: https://github.com/lavyun/ vue-demo -Search

사용된 주요 지식은 매우 간단하며, vuejs2.0에 대한 간단한 지식이면 충분합니다. 소스 코드는 .vue를 사용하여 ES6, 웹팩 패키징 등을 빌드합니다. 아직은 상대적으로 경험이 부족하기 때문에 먼저 간단한 .js를 사용하여 작성하겠습니다.

먼저 효과를 살펴보겠습니다

여기에는 두 개의 구성 요소가 있는데, 하나는 로고 부분이고 다른 하나는 검색 상자 부분입니다.

html

html은 매우 간단합니다. 단지 두 개의 구성요소만 참조합니다.

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

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

logo

먼저 분석해 보겠습니다. 먼저 6ed09268cbdd0015bce8dcbbdfa9bfe4가 아래에서 다른 검색 엔진 아이콘을 선택하면 표시됩니다. 그에 따라 변경해야합니다. 따라서 e431342b2894783f54b33740f33c93c1. 뒤쪽의 역삼각형을 클릭하면 드롭다운 목록914942ce123cf770f7ea92723ad87555이 표시됩니다.
그러면 드롭다운 상자가 있습니다. 전환 효과를 가지려면 418a046b9fb4747403a36c47e646d86d 드롭다운 목록과 유사합니다.
검색을 하시면 주로 $http.jsonp를 사용하시고, ES6 문법도 사용하시나요? 반환은 Promise의 .then()인 것 같습니다.

Vue.component(&#39;search-panel&#39;,{
 template:&#39;\
 <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;
 })
 }
})

두 형제 구성 요소 간의 통신 문제

fd098b03a0046905b4f34a14f2cba3c4검색 엔진을 바꾸면 04a43090e6cbf1462a77fdb864c1f813을 해당 검색 엔진으로 교체해야 합니다. 여기서는 두 구성 요소가 부모-자식 관계에 있지 않기 때문에 중간에 새로운 빈 Vue 개체를 만들어야 합니다.

var bus = new Vue();

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

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

여기에서 이 문제에 주의하세요. 이것은 $on 버스에 대한 포인트이므로 검색 패널을 참조하기 위해 저장해야 합니다.

vuejs에서 검색창을 구현하는 방법

관련 기사