仿造 elementUI 实现一个下拉选择器

下面是一个简化版的下拉选择器组件的实现，使用了Vue.js和CSS，但不是使用Element UI，因为我们要仿造它。

<template>
  <div class="select-container">
    <div
      class="select-trigger"
      @click="toggle"
    >
      {{ selectedOption.label }}
      <i class="select-icon" :class="{ 'el-icon-arrow-down': !isOpen, 'el-icon-arrow-up': isOpen }"></i>
    </div>
    <div
      v-show="isOpen"
      class="select-dropdown"
    >
      <div
        v-for="(option, index) in options"
        :key="index"
        class="select-dropdown-item"
        @click="select(option)"
      >
        {{ option.label }}
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isOpen: false,
      selectedOption: {},
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' }
      ]
    };
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
    },
    select(option) {
      this.selectedOption = option;
      this.isOpen = false;
    }
  }
};
</script>
 
<style scoped>
.select-container {
  position: relative;
  width: 200px;
}
 
.select-trigger {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 15px;
  height: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
 
.select-icon {
  margin-left: 5px;
  font-size: 12px;
}
 
.select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}
 
.select-dropdown-item {
  padding: 5px 15px;
  cursor: pointer;
}
 
.select-dropdown-item:hover {
  background: #f5f7fa;
}
</style>

这个简化版的下拉选择器实现了基本的展开、收起和选项选择功能。你可以通过CSS调整样式以更接近Element UI的风格。