<template>
<div class="select-wrap">
<div class="select" @click="selectShow">
{{ name }} ▼
<div class="select-show" v-show="show">
<div
class="select-item"
v-for="(item, index) in data"
:key="index"
@click="selectItem(index)"
>
{{ item }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array,
default: [],
},
selectedName: {
type: String,
default: "",
},
},
watch: {
selectedName(val) {
this.name = val;
},
},
data() {
return {
name: this.selectedName,
show: false,
};
},
methods: {
selectShow() {
this.show = !this.show;
},
selectItem(index) {
this.name = this.data[index];
},
},
};
</script>
<style scoped>
.select {
cursor: pointer;
position: absolute;
top: 50px;
right: 50px;
width: 110px;
height: 31px;
background: #2a3c5a;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
z-index: 1000;
}
.select-show {
position: absolute;
background: #2a3c5a;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
top: 34px;
left: 0;
display: flex;
flex-direction: column;
}
.select-item {
right: 50px;
width: 110px;
height: 31px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #4a73a6;
}
</style>
子组件
<Select
:selectedName="浙江省"
:data="placeData"
></Select>
<Select
:selectedName="timeData[0]"
:data="timeData"
style="position: absolute; top: 0px; right: 130px"
></Select>
data(){
return{
timeData: ["2022", "2021", "2020"],
placeData: [
"浙江省",
"杭州市",
"宁波市",
"温州市",
"湖州市",
"嘉兴市",
"绍兴市",
"金华市",
"衢州市",
"舟山市",
"台州市",
"丽水市",
],
}
}