自定义封装下拉组件

<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: [
        "浙江省",
        "杭州市",
        "宁波市",
        "温州市",
        "湖州市",
        "嘉兴市",
        "绍兴市",
        "金华市",
        "衢州市",
        "舟山市",
        "台州市",
        "丽水市",
      ],
}
}