mirror of
https://github.com/keven1024/015.git
synced 2026-05-26 15:13:30 +00:00
40 lines
1.1 KiB
Vue
40 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectLabel,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select'
|
|
import type { RuleExpression } from 'vee-validate'
|
|
type SelectValue = string | number
|
|
const props = defineProps<{
|
|
name: string
|
|
placeholder?: string
|
|
label?: string
|
|
rules?: RuleExpression<SelectValue>
|
|
options?: {
|
|
label?: string
|
|
value: SelectValue
|
|
}[]
|
|
}>()
|
|
const { value } = useField<SelectValue>(props.name, props?.rules)
|
|
</script>
|
|
|
|
<template>
|
|
<Select v-model="value">
|
|
<SelectTrigger>
|
|
<SelectValue :placeholder="placeholder" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel class="text-xs" v-if="label">{{ label }}</SelectLabel>
|
|
<SelectItem v-for="item in options" :key="item.value" :value="item.value">
|
|
{{ item?.label ?? item.value }}
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</template> |