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

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

먼저 분석해 보겠습니다. 먼저 가 아래에서 다른 검색 엔진 아이콘을 선택하면 표시됩니다. 그에 따라 변경해야합니다. 따라서 . 뒤쪽의 역삼각형을 클릭하면 드롭다운 목록이 표시됩니다.
그러면 드롭다운 상자가 있습니다. 전환 효과를 가지려면 호버 효과를 내고 싶다면 index와 hoverindex가 같은지 비교하고 같으면 클래스를 추가하는 데이터 중심 사고를 사용하세요.

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

드롭다운 상자

입력은 양방향으로 바인딩되어야 하므로 v-model="keyword"도 바인딩되어야 하며, 키보드 이벤트 @keyup도 바인딩되어야 합니다. 를 선택하고 아래로 내려가거나 위로 올라갈 때 정보 목록을 반환합니다.
아래 세부정보 상자는 <로고-사진> 드롭다운 목록과 유사합니다.
검색을 하시면 주로 $http.jsonp를 사용하시고, ES6 문법도 사용하시나요? 반환은 Promise의 .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;
 })
 }
})

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

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

var bus = new Vue();

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

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

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

추천 학습: "vue tutorial"

위 내용은 vuejs에서 검색창을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!