【腾讯IMWeb前端训练营】 Vuejs select下拉框demo

第二次作业：用vuejs 封装一个下拉框组件

效果图：

 

HTML：

1 <div id="app">
2         <custom-select btn="查询" :list="list1"></custom-select>
3         <custom-select btn="搜索" :list="list2"></custom-select>
4 </div>

 

JS：

 1  Vue.component("custom-select",{
 2     data:function(){
 3         return {
 4             selectShow:false,
 5             val:""
 6         }
 7     },
 8     props:["btn","list"],
 9     template:`    
10         <section class="wrap">
11             <div class="searchIpt">
12                 <div class="search">
13                     <div>
14                         <input type="text" 
15                             class="keyword" 
16                             @click="selectShow = !selectShow" 
17                             v-model="val"
18                         />
19                         <input type="button" :value="btn" class="btn"/>
20                         <span></span>
21                     </div>
22                 </div>
23                 <custom-list 
24                     v-show="selectShow"
25                     :list="list"
26                     :val="val"
27                     @receive="changeValueHandle"
28                 ></custom-list>
29             </div>
30         </section>`,
31     methods:{
32         changeValueHandle(value){
33             this.val = value;
34         }
35     }
36 })
37 
38 //自定义select组件
39 Vue.component('custom-list',{
40     props:["list","val"],//
41     template:
42         `<ul class="list">
43             <li v-for="(item,index) of computedList" @click="selectValueHandle(item,index)">{{item}}</li>
44         </ul>`,
45     methods:{ //点击事件
46         selectValueHandle(item,index){
47             this.$emit("receive",item,index)
48         }
49     },
50     computed:{ 
51         computedList(){ //过滤
52             var val = this.val;
53             return this.list.filter(function(item){
54                 return item.toLowerCase().indexOf(val.toLowerCase())!==-1;
55             })
56         }
57     }
58 })
59 
60 new Vue({
61     el:"#app",
62     data:{
63         list1:['广州','深圳','珠海'],
64         list2: ['2017-4-22','2017-4-23','2017-4-24']
65     }
66 })

 

posted @ 2017-04-22 11:50  vinpho  阅读(610)  评论(0)  编辑  收藏  举报