this.$emit('input', value);
this.data.forEach(item => {
if (item[this.itemValue ? this.itemValue : 'id'] == value) {
return this.currentLabel = item[this.itemLabel ? this.itemLabel : 'name'];
}
});
}
},
data:{
immediate: true,
handler(arr) {
if(this.value||!this.currentLabel){
arr.forEach(item=>{
if(item[this.itemValue ? this.itemValue : 'id'] == this.value){
this.currentLabel = item[this.itemLabel ? this.itemLabel : 'name'];
return;
}
})
}
}
}
},
methods: {
chooseItem(item) {
if (this.currentValue !== item[this.itemValue ? this.itemValue : 'id']) {
this.$emit('change',item[this.itemValue ? this.itemValue : 'id']);
}
this.currentValue = item[this.itemValue ? this.itemValue : 'id'];
this.currentLabel = item[this.itemLabel ? this.itemLabel : 'name'];
this.$emit('input', this.currentValue);
this.collapse = true;
}
}
}
</script>
<style lang="scss" scoped>
.select {
position: relative;
.input {
width: 100%;
height: 30px;
line-height: 30px;
background-color: #fff;
border: 1px solid #02b4fe;
border-radius: 0 3px 3px 0;
padding-left: 10px;
color: #666;
position: relative;
.placeholder {
color: #aaa;
}
}
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid #02b4fe;
position: absolute;
right: 5px;
top: 10px;
}
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #02b4fe;
position: absolute;
right: 5px;
top: 10px;
}
.option-list {
max-height: 200px;
overflow-y: scroll;
position: absolute;
top: 2rem;
left: 0;
z-index: 5;
width: 100%;
padding: 0 5px;
font-size: 10px;
color: #aaa;
background-color: #fff;
text-align: left;
box-shadow: 0 0 5px rgba(0, 0, 0, .1);
border: 1px solid rgb(79, 192, 232);
.option-item {
text-align: center;
line-height: 1.5rem;
}
}
}
</style>
如上所示，当声明了mySelect组件之后，在项目中实际使用时，就可以如下所示直接使用：
<template>
<mySelect v-model="testValue" placeholder="请选择" :data="testArr" item-label="id"
item-value="name"></mySelect>
</template>
<script>
