@dotwake/vue-custom-select

A beautiful, customizable Vue 3 dropdown select component with TypeScript support.

Features

• 🎨 Fully customizable colors and styles via CSS variables
• 📦 TypeScript support with full type definitions
• 🎯 Vue 3 Composition API with <script setup>
• 💨 Teleport dropdown to body to avoid z-index issues
• ⌨️ Keyboard navigation support
• 🖱️ Hover to open, click outside to close
• ✨ Clearable selection
• ♿ Accessible

Installation

npm install @dotwake/vue-custom-select
# or
yarn add @dotwake/vue-custom-select
# or
pnpm add @dotwake/vue-custom-select

Usage

Global Registration

import { createApp } from 'vue'
import VueCustomSelect from '@dotwake/vue-custom-select'
import '@dotwake/vue-custom-select/dist/style.css'

const app = createApp(App)
app.use(VueCustomSelect)
app.mount('#app')

Local Import

<script setup>
import { CustomSelect } from '@dotwake/vue-custom-select'
import '@dotwake/vue-custom-select/dist/style.css'

const options = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
  { value: '3', label: 'Option 3' }
]

const selectedValue = ref('')
</script>

<template>
  <CustomSelect
    v-model="selectedValue"
    :options="options"
    placeholder="Please select"
  />
</template>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | options | Array | [] | Array of options | | modelValue | string \| number \| object \| null | null | Selected value (v-model) | | placeholder | string | '请选择' | Placeholder text | | disabled | boolean | false | Disable the select | | clearable | boolean | true | Show clear button | | optionKey | string | 'value' | Key for option value | | optionLabel | string | 'label' | Key for option label | | width | string \| number | '224px' | Select width | | optionsClass | string | '' | Additional class for options dropdown | | closeDelay | number | 300 | Delay before closing dropdown (ms) | | colors | object | {} | Custom color configuration |

Events

| Event | Parameters | Description | |-------|------------|-------------| | update:modelValue | value | Emitted when selection changes | | change | value, option | Emitted when selection changes | | clear | - | Emitted when cleared |

Custom Colors

<CustomSelect
  v-model="value"
  :options="options"
  :colors="{
    border: '#e0e0e0',
    borderHover: '#409eff',
    borderFocus: '#409eff',
    background: '#ffffff',
    text: '#333333',
    optionBackgroundSelected: '#ecf5ff'
  }"
/>

Available Color Keys

• border, borderHover, borderFocus, borderDisabled
• background, backgroundHover, backgroundFocus, backgroundDisabled
• text, textPlaceholder, textDisabled
• optionBackground, optionBackgroundHover, optionBackgroundSelected
• optionText
• shadow, shadowHover, shadowFocus
• clearIcon, clearIconHover
• arrowIcon, arrowIconHover

License

MIT