@skyfox2000/webui 1.5.15 → 1.5.17

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@skyfox2000/webui",
-   "version": "1.5.15",
+   "version": "1.5.17",
    "description": "后台前端通用组件定义, 支持国际化",
    "type": "module",
    "keywords": [],

package/src/components/form/input/index.vue

@@ -1,18 +1,11 @@
 <script setup lang="ts">
 import { formValidate, useInputFactory } from '@/index';
 import { Input } from 'ant-design-vue';
-import { ref, watch } from 'vue';
+import { ref, watch, computed, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
 
 const { editorCtrl, labelText, errInfo } = useInputFactory();
-const onBlur = () => {
-   if (errInfo?.value.errClass && editorCtrl) {
-      /// 重新开始验证
-      formValidate(editorCtrl);
-   }
-};
-
 const props = withDefaults(defineProps<{
    value?: any;
    /**
@@ -29,7 +22,22 @@ const props = withDefaults(defineProps<{
 
 // 如果初始value为undefined，自动设置undefValue为true
 const undefValue = props.value === undefined ? true : props.undefValue;
-const emit = defineEmits(['update:value']);
+const emit = defineEmits(['update:value', 'blur', 'change']);
+
+// 过滤已配置的事件处理器
+const filteredAttrs = computed(() => {
+   const { onBlur, onChange, ...rest } = useAttrs();
+   return rest;
+});
+
+const onBlur = (e: any) => {
+   if (errInfo?.value.errClass && editorCtrl) {
+      /// 重新开始验证
+      formValidate(editorCtrl);
+   }
+   emit('blur', e)
+};
+
 // 内部值，拦截外部传入的 value
 const innerValue = ref(props.value);
 
@@ -53,10 +61,12 @@ watch(
    },
 );
 
-const onClear = () => {
+const onClear = (e: any) => {
    if (innerValue.value === '') {
       innerValue.value = undefValue ? undefined : null;
    }
+
+   emit('change', e)
 };
 </script>
 <template>
@@ -65,16 +75,8 @@ const onClear = () => {
          errInfo?.errClass,
          errInfo?.errClass === 'error' && !$slots.addonBefore && !$slots.addonAfter
             ? '!border-red-300 shadow-[0_0_3px_0px_#ff4d4f]'
-            : '',
-      ]"
-      v-model:value="innerValue"
-      autocomplete="new-password"
-      :allow-clear="true"
-      :placeholder="t('webui.common.placeholder', [labelText])"
-      @blur="onBlur"
-      @change="onClear"
-      v-bind="$attrs"
-   >
+      : '',]" v-model:value="innerValue" autocomplete="new-password" :allow-clear="true"
+      :placeholder="t('webui.common.placeholder', [labelText])" @blur="onBlur" @change="onClear" v-bind="filteredAttrs">
       <template #addonBefore v-if="$slots.addonBefore">
          <slot name="addonBefore"></slot>
       </template>

package/src/index.ts

@@ -162,6 +162,7 @@ export {
    validateData,
    resetRules,
    getRuleTexts,
+   getValidator,
    useInputFactory,
    useFormItemFactory,
 } from '@/utils/form-validate';

package/src/utils/form-validate.ts

@@ -169,6 +169,16 @@ export const getRuleTexts = (rules?: Record<string, ValidateRule>) => {
    return result;
 };
 
+export const getValidator = (rules: Record<string, ValidateRule>) : Validator => {
+   /**
+    * 设置自定义文字显示与验证条件
+    */
+   const ruleValidator = new Validator({});
+   ruleValidator.messages(validMessages.messages());
+   ruleValidator.define(rules);
+   return ruleValidator;
+}
+
 /**
  * 表单数据验证
  * @param editorCtrl 表单控制对象