feat(CategorySearch): 输入框筛选条件点确定时触发校验

Author: xingyan

packages/devui-vue/devui/category-search/src/components/text-input-menu.tsx

@@ -1,46 +1,50 @@
-import { defineComponent, toRefs, inject, reactive } from 'vue';
+import { defineComponent, inject, reactive, ref } from 'vue';
 import type { SetupContext } from 'vue';
 import { Button } from '../../../button';
 import { typeMenuProps, categorySearchInjectionKey } from '../category-search-types';
 import type { TypeMenuProps, CategorySearchInjection } from '../category-search-types';
 
 export default defineComponent({
-	name: 'DCategorySearchTextInput',
-	props: typeMenuProps,
-	emits: ['close'],
-	setup(props: TypeMenuProps, ctx: SetupContext) {
-		const { tag } = toRefs(props);
-		const { getTextInputValue } = inject(categorySearchInjectionKey) as CategorySearchInjection;
-		const formData = reactive({
-			text: tag.value.value!.value,
-		})
-		const onConfirmClick = () => {
-			getTextInputValue(tag.value, formData.text as string);
-			ctx.emit('close');
-		};
-		const onCancelClick = () => {
-			ctx.emit('close');
-		};
+  name: 'DCategorySearchTextInput',
+  props: typeMenuProps,
+  emits: ['close'],
+  setup(props: TypeMenuProps, ctx: SetupContext) {
+    const formEl = ref();
+    const { getTextInputValue } = inject(categorySearchInjectionKey) as CategorySearchInjection;
+    const formData = reactive({
+      text: props.tag.value!.value,
+    });
+    const onConfirmClick = () => {
+      formEl.value.validate((isValid: boolean) => {
+        if (isValid) {
+          getTextInputValue(props.tag, formData.text as string);
+          ctx.emit('close');
+        }
+      });
+    };
+    const onCancelClick = () => {
+      ctx.emit('close');
+    };
 
-		return () => (
-			<d-form data={formData} pop-position={['right']}>
-				<d-form-item field='text' rules={tag.value.validateRules}>
-					<d-input
-						v-model={formData.text}
-						autocomplete='off'
-						autofocus
-						maxlength={tag.value.maxLength}
-						placeholder={tag.value.placeholder || ''}></d-input>
-				</d-form-item>
-				<div class='dp-dropdown-operation-area'>
-					<Button variant='solid' onClick={onConfirmClick}>
-						确定
-					</Button>
-					<Button variant='solid' color='secondary' onClick={onCancelClick}>
-						取消
-					</Button>
-				</div>
-			</d-form>
-		);
-	},
-});
+    return () => (
+      <d-form ref={formEl} data={formData} pop-position={['right']}>
+        <d-form-item field="text" rules={props.tag.validateRules}>
+          <d-input
+            v-model={formData.text}
+            autocomplete="off"
+            autofocus
+            maxlength={props.tag.maxLength}
+            placeholder={props.tag.placeholder || ''}></d-input>
+        </d-form-item>
+        <div class="dp-dropdown-operation-area">
+          <Button variant="solid" onClick={onConfirmClick}>
+            确定
+          </Button>
+          <Button variant="solid" color="secondary" onClick={onCancelClick}>
+            取消
+          </Button>
+        </div>
+      </d-form>
+    );
+  },
+});