【IMWeb训练营作业】custom-select
7组 - kangkai
demo展示
demo: http://kangkai-fe.github.io/demo/vue/custom-select/
github: https://github.com/KangKai-fe/demo/tree/master/IMWeb/vue/custom-select
html 代码
<div id="app">
<section class="container">
<h3>列表一</h3>
<custom-select :list="listOne.list" :btn="listOne.btn"></custom-select>
</section>
<section class="container">
<h3>列表二</h3>
<custom-select :list="listTwo.list" :btn="listTwo.btn"></custom-select>
</section>
</div>
javascript 代码
//注册组件
Vue.component("custom-select", {
props: ['btn', 'list'],
data: function () {
return {
listShown: false,
searchValue: ''
}
},
template: `<div class="searchIpt clearFix">
<div class="clearFix">
<input placeholder="点击查询" type="text" class="keyWord"
:value="searchValue"
@focus="listShown = !listShown"
/>
<input type="button"
:value="btn"
@click="listShown = !listShown"
/>
</div>
<custom-list
:list="list"
@listClicked="listClickedHandler"
v-show="listShown"
></custom-list>
</div>`,
methods: {
listClickedHandler(value) {
this.listShown = false;
this.searchValue = value;
}
}
});
Vue.component('custom-list', {
props: ['list'],
template: `<ul class="list">
<li
v-for="item in list"
@click="listClicked(item)"
>{{ item }}</li>
</ul>`,
methods: {
listClicked(value) {
this.$emit('listClicked', value);
}
}
})
new Vue({
el: "#app",
data: {
listOne: {
btn: '城市',
list: ['北京', '上海', '广州', '石家庄']
},
listTwo: {
btn: 'Vue',
list: ['vue', 'vue-router', 'vuex', 'vue-cli']
}
}
})