自定义封装下拉组件

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