feat: vbenSelect support prop allowClear
(#6043)
This commit is contained in:
parent
cb45987fe2
commit
be840460d8
@ -1,4 +1,6 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { CircleX } from '@vben-core/icons';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
SelectContent,
|
SelectContent,
|
||||||
@ -8,17 +10,33 @@ import {
|
|||||||
} from '../../ui';
|
} from '../../ui';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
allowClear?: boolean;
|
||||||
class?: any;
|
class?: any;
|
||||||
options?: Array<{ label: string; value: string }>;
|
options?: Array<{ label: string; value: string }>;
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = defineProps<Props>();
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
allowClear: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const modelValue = defineModel<string>();
|
||||||
|
|
||||||
|
function handleClear() {
|
||||||
|
modelValue.value = undefined;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<Select>
|
<Select v-model="modelValue">
|
||||||
<SelectTrigger :class="props.class">
|
<SelectTrigger :class="props.class" class="flex w-full items-center">
|
||||||
<SelectValue :placeholder="placeholder" />
|
<SelectValue class="flex-auto text-left" :placeholder="placeholder" />
|
||||||
|
<CircleX
|
||||||
|
@pointerdown.stop
|
||||||
|
@click.stop.prevent="handleClear"
|
||||||
|
v-if="allowClear && modelValue"
|
||||||
|
data-clear-button
|
||||||
|
class="mr-1 size-4 cursor-pointer opacity-50 hover:opacity-100"
|
||||||
|
/>
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<template v-for="item in options" :key="item.value">
|
<template v-for="item in options" :key="item.value">
|
||||||
|
Loading…
Reference in New Issue
Block a user