【IMWeb训练营作业】【Vue】Select组件

核心代码

index.html

< div class = "main" >

< div class = "wrapper" >

< h3 class = "title" >自定义下拉框1 </ h3 >

< custom-select btn = "查询" : list = "list1" ></ custom-select >

</ div >

< div class = "wrapper" >

< h3 class = "title" >自定义下拉框2 </ h3 >

< custom-select btn = "搜索" : list = "list2" ></ custom-select >

</ div >

</ div >

app.js

Vue. component( 'custom-select', {

data() {

return {

selectShow: false,

inputValue: ''

}

},

props: [

'btn',

'list'

],

template: `

<section>

<input

type="text"

:value="inputValue"

/>

<input type="button"

:value="btn"

@click="selectShow =!selectShow"

/>

<custom-list

:list="list"

@receive="changeValueHandler"

v-show="selectShow"

>

</custom-list>

</section>

`,

methods: {

changeValueHandler( item) {

this.inputValue = item;

this.selectShow = ! this.selectShow;

}

}

});

Vue. component( 'custom-list', {

props: [ 'list'],

template: `

<ul class="list">

<li v-for="item of list" @click="selectValueHandler(item)">{{item}}</li>

</ul>

`,

methods: {

selectValueHandler( item) {

this. $emit( 'receive', item);

}

}

});

new Vue({

el: '.main',

data: {

list1: [ 'React', 'Vue', 'Angular'],

list2: [ '木卫2', '土卫2']

}

});

运行效果

https://code.hcharts.cn/public/455mom