ether-admin/src/components/StatusSelect/index.vue

36 lines
900 B
Vue

<script setup lang="ts">
import { computed } from 'vue'
interface Props {
modelValue?: string
options?: { value: string; label: string; color?: string }[]
placeholder?: string
}
const props = withDefaults(defineProps<Props>(), {
options: () => [
{ value: 'ACTIVE', label: '正常', color: 'success' },
{ value: 'LOCKED', label: '锁定', color: 'warning' },
{ value: 'DISABLED', label: '禁用', color: 'error' }
],
placeholder: '请选择状态'
})
const emit = defineEmits<{
(e: 'update:modelValue', value: string): void
(e: 'change', value: string): void
}>()
const value = computed({
get: () => props.modelValue || undefined,
set: (val) => {
emit('update:modelValue', val!)
emit('change', val!)
}
})
</script>
<template>
<a-select v-model:value="value" :options="options" :placeholder="placeholder" style="width: 120px" allow-clear />
</template>