第二次作业:用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 })
时间: 2024-10-01 06:12:00