自定义select

很2b但是也是有知识点的

<template>
  <div class="custom-select-container" @click="toggleDropdown" ref="container">
    <input type="text" class="custom-select-input" readonly :value="selectedOption" placeholder="Select an option">
    <div class="dropdown-icon" :class="{ active: isActive }"></div>
    <ul class="dropdown-menu" v-show="isActive">
      <li v-for="option in options" :key="option" @click="selectOption(option)">
        {{ option }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      selectedOption: '',
      options: ['Option 1', 'Option 2', 'Option 3']
    };
  },
  methods: {
    toggleDropdown() {
      this.isActive = !this.isActive;
    },
    selectOption(option) {
      this.selectedOption = option;
      this.isActive = false;
    },
    handleClickOutside(event) {
      if (!this.$refs.container.contains(event.target)) {
        this.isActive = false;
      }
    }
  },
  mounted() {
    document.addEventListener('click', this.handleClickOutside);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside);
  }
};
</script>

<style scoped>
.custom-select-container {
  position: relative;
  display: inline-block;
  width: 200px;
}

.custom-select-input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;
}

.dropdown-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border: solid black;
  border-width: 0 2px 2px 0;
  padding: 3px;
  transition: transform 0.3s;
  pointer-events: none;
}

.dropdown-icon.active {
  transform: translateY(-50%) rotate(225deg);
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dropdown-menu li {
  padding: 10px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background-color: #f0f0f0;
}

.custom-select-container .dropdown-menu {
  display: block;
}
</style>