diff --git a/packages/ui-vue/components/combo-list/src/combo-list.component.tsx b/packages/ui-vue/components/combo-list/src/combo-list.component.tsx index 5ca670b..965715d 100644 --- a/packages/ui-vue/components/combo-list/src/combo-list.component.tsx +++ b/packages/ui-vue/components/combo-list/src/combo-list.component.tsx @@ -3,6 +3,7 @@ import { comboListProps, ComboListProps } from './combo-list.props'; import { ButtonEdit } from '../../button-edit'; import { groupIcon, ViewType } from './types'; import { useState } from './composition/use-state'; +import { useEventHandlers } from './composition/use-event-handlers'; export default defineComponent({ name: 'FComboList', props: comboListProps, @@ -13,6 +14,7 @@ export default defineComponent({ // is panel visible const [isPanelVisible] = useState(false); const [displayText, setDisplayText] = useState(props.displayText); + const { onClear } = useEventHandlers(props, context, modelValue); return () => { return ( <> @@ -29,7 +31,7 @@ export default defineComponent({ maxLength={props.maxLength} style="display:block" modelValue={displayText.value} - onClear={() => setDisplayText('')} + onClear={onClear} /> {/** tag area */} {props.viewType === ViewType.Tag && ( diff --git a/packages/ui-vue/components/combo-list/src/composition/types.ts b/packages/ui-vue/components/combo-list/src/composition/types.ts index 4c5a8ab..32cedad 100644 --- a/packages/ui-vue/components/combo-list/src/composition/types.ts +++ b/packages/ui-vue/components/combo-list/src/composition/types.ts @@ -4,4 +4,11 @@ import { Ref, UnwrapRef } from "vue"; * UseState type * @description 受vue类型系统限制,仅在类型定义中约定state只读,实际返回对象可写 */ -export type UseState = [Readonly>>, (state: UnwrapRef) => void]; \ No newline at end of file +export type UseState = [Readonly>>, (state: UnwrapRef) => void]; + +export interface UseEventHandlers { + /** + * 清除事件 + */ + onClear: ($event: Event) => void; +} \ No newline at end of file diff --git a/packages/ui-vue/components/combo-list/src/composition/use-event-handlers.ts b/packages/ui-vue/components/combo-list/src/composition/use-event-handlers.ts new file mode 100644 index 0000000..5825ca1 --- /dev/null +++ b/packages/ui-vue/components/combo-list/src/composition/use-event-handlers.ts @@ -0,0 +1,12 @@ +import { Ref, SetupContext } from "vue"; +import { ComboListProps } from "../combo-list.props"; +import { UseEventHandlers } from "./types"; + +export function useEventHandlers(props: ComboListProps, context: SetupContext, modelValue: Ref): UseEventHandlers { + function onClear($event: Event) { + modelValue.value = ''; + } + return { + onClear + }; +} \ No newline at end of file