123 lines
2.3 KiB
Vue
123 lines
2.3 KiB
Vue
<template>
|
|
<div class="selectedBox">
|
|
<div class="selected" @click.stop="downClick">
|
|
<span class="name">{{selectedName}}</span>
|
|
<el-icon class="icon" :class="downShow?'selectedIcon':''"><el-icon-arrow-down /></el-icon>
|
|
</div>
|
|
<slot name="down">
|
|
<div class="downMain" v-bind="$attrs" v-if="downShow">
|
|
<div class="item" :class="selectedValue===item.value?'itemTrue':''" @click="itemClick(item)" v-for="(item,index) in list" :key="index">{{item.name}}</div>
|
|
</div>
|
|
</slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {eventBus} from "@/utils/eventBus";
|
|
export default {
|
|
name: "",
|
|
data(){
|
|
return{
|
|
downShow:false,
|
|
selectedName:'',
|
|
selectedValue:'',
|
|
list:[]
|
|
}
|
|
},
|
|
props:{
|
|
listData:{
|
|
type:Array
|
|
},
|
|
name:{
|
|
type:String
|
|
},
|
|
value:{
|
|
type:[String,Number]
|
|
}
|
|
},
|
|
watch:{
|
|
listData:{
|
|
handler(val){
|
|
this.list = val;
|
|
},
|
|
deep:true,
|
|
immediate:true
|
|
},
|
|
name:{
|
|
handler(val){
|
|
this.selectedName = val
|
|
},
|
|
immediate:true
|
|
},
|
|
value:{
|
|
handler(val){
|
|
this.selectedValue = val
|
|
},
|
|
immediate:true
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods:{
|
|
downClick(){
|
|
this.downShow = !this.downShow;
|
|
eventBus.$emit('searchDownShow',this.downShow);
|
|
},
|
|
downOut(){
|
|
this.downShow = false;
|
|
},
|
|
itemClick(item){
|
|
this.selectedName = item.name;
|
|
this.selectedValue = item.value;
|
|
this.downShow = false;
|
|
this.$emit('scSelect',{name:this.selectedName,value:this.selectedValue});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.selectedBox{
|
|
position: relative;
|
|
}
|
|
.selected{
|
|
padding: 0 10px;
|
|
color: #555;
|
|
display: flex;align-items: center;
|
|
height: 30px;
|
|
border-right: 1px solid #e9e9e9;
|
|
cursor: pointer;
|
|
.name{margin-right: 4px;}
|
|
.selectedIcon{
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
.downMain{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 35px;
|
|
z-index: 100;
|
|
background: var(--el-bg-color);
|
|
width: 100%;
|
|
color: #555;
|
|
border-radius: 0 0 4px 4px;
|
|
background-color: var(--el-fill-color-blank);
|
|
transition: var(--el-transition-duration);
|
|
transform: translateZ(0);
|
|
box-shadow: 0 6px 4px rgba(180, 207, 235, 0.25);
|
|
//border: 1px solid var(--el-border-color-light);
|
|
.item{
|
|
padding: 0 10px;text-align: left;
|
|
}
|
|
.item:hover{
|
|
background-color: var(--el-color-primary-light-9);
|
|
color: var(--el-color-primary);
|
|
cursor: pointer;
|
|
}
|
|
.itemTrue{
|
|
color: var(--el-color-primary);
|
|
}
|
|
}
|
|
</style>
|