使用 ChatGPT 封装 Vue3 Select组件 - 不使用第三方库

下面是使用ChartGPT 封装的 Vue3 Select组件。

经过一步步，生成了如下Select 组件， 可满足基本要求。

使用了关键字如： 你现在是位资深软件工程师， 新的vue3 项目， 需要封装一个自己的select 组件， 不使用第三方库， 使用<script setup> 语法， options 的数据需要从使用这个组件传入， 传入默认选项 ID， 传入包含对象的选项数组， 要获取用户选择的选项ID， 使用 defineEmits 函数进行自定义事件的定义, 监视选择ID的变化...

封装的Select组件如下。 

<!-- src/components/CustomSelect.vue -->
<template>
    <div class="custom-select">
      <div class="selected-item" @click="toggleDropdown">{{ selectedOption.name }}</div>
      <div class="arrow-down"></div> <!-- 向下箭头元素 -->
      <ul v-show="isDropdownOpen">
        <li v-for="option in options" :key="option.id" @click="selectOption(option)">
          {{ option.name }}
        </li>
      </ul>
    </div>
  </template>
  
  <script setup>
  import { ref, defineProps, onMounted, defineEmits, watch } from 'vue';
  
  // 定义组件的 props
  const props = defineProps({
    options: {
      type: Array,
      default: () => []
    },
    defaultOptionId: {
      type: Number,
      default: 0
    }
  });
  
  // 定义组件的响应式数据
  const selectedOption = ref({});
  const isDropdownOpen = ref(false);
  
  // 设置默认选项
  onMounted(() => {
    const defaultOption = props.options.find(option => option.id === props.defaultOptionId);
    selectedOption.value = defaultOption || {};
  });
  
  // 监视默认选项ID的变化
  watch(() => props.defaultOptionId, (newOptionId) => {
    const newDefaultOption = props.options.find(option => option.id === newOptionId);
    selectedOption.value = newDefaultOption || {};
  });
  
  // 定义自定义事件
  const emit = defineEmits(['select']);
  
  // 切换下拉菜单的显示状态
  const toggleDropdown = () => {
    isDropdownOpen.value = !isDropdownOpen.value;
  };
  
  // 选择选项
  const selectOption = (option) => {
    selectedOption.value = option;
    isDropdownOpen.value = false;
    emit('select', option.id); // 触发自定义事件并传递选项ID
  };
  </script>
  
  <style scoped>
  .custom-select {
    position: relative;
  }
  
  .selected-item {
    padding: 15px 10px 10px 30px;
    background-color: #f1f1f1;
    cursor: pointer;
    border-radius: 20px; /* 设置组件的圆角 */
  }
  
  ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 20px;
    overflow: hidden;
  }
  
  li {
    padding: 10px;
    cursor: pointer;
  }
  
  li:hover {
    background-color: #f1f1f1;
  }
  
  .custom-select {
    position: relative;
  }
  
  .arrow-down {
    position: absolute;
    right: 20px; /* 调整箭头的位置 */
    top: 20px; /* 将箭头垂直居中 */
    transform: translateY(-50%) rotate(45deg); /* 将箭头旋转-45度并垂直居中 */
    width: 10px;
    height: 10px;
    border: 2px solid black; /* 调整箭头的颜色和线宽 */
    border-left: none; /* 去掉箭头左边的线 */
    border-top: none; /* 去掉箭头上边的线 */
    cursor: pointer;
    pointer-events: none;
  }
  </style>
  

组件的使用如下：

<script setup>
import CustomSelect from "@/components/CustomSelect.vue";

//默认选择第一个选项
const selectedID = ref(1)

//生成选项
const  selectOptions = [
  {id: 1, name: "option 1"},
  {id: 2, name: "option 2"},
  {id: 3, name: "option 3"},
]

// 获取到用户选择的选项ID，并进行相应的处理。
function handleSelectId(optionId) {
  selectedID.value = optionId;
  console.log('Selected option ID:', optionId);
}
</script>