1、Select.vue
<template>
<div>
<button @click="change" >{{curselect}}</button>
<ul class="list" v-if="selectShow">
<li v-for="item of currentList" @click="changeselect(item)" >{{item}}</li>
</ul>
</div>
</template>
<style scoped>
li{list-style-type:none;}
li:hover{ background-color: aquamarine}
button{border:0px;background-color:transparent;}
</style>
<script>
import Select from './Select.js';
export default Select;
</script>
2、Select.js
export default {
name: 'HdSelect',
data(){
return{
currentList:[],
selectShow:false,
curselect:''
}
},
props:{
list:{
type:Array,
default:[]
}
},
watch:{
data: function () {
this.makeList();
}
},
methods:{
makeList(){
this.currentList = this.list
this.curselect = this.list[0]
},
change(){
this.selectShow = !this.selectShow
},
changeselect(index){
this.curselect = index;
this.selectShow = false;
},
},
mounted:function(){
this.makeList();
}
}
index.js
import mySelect from './Select.vue';
const HdSelect = {
install:function(Vue){
Vue.component('HdSelect',mySelect)
}
}
export default HdSelect;
