vue2server7 7.0.11 → 7.0.13

package/frontEnd/src/components/NumberRange.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="number-range" :class="{ 'is-disabled': disabled }">
+  <div class="number-range" :class="{ 'is-disabled': disabled, 'is-error': showInternalError }">
     <el-input
       v-model="minDisplay"
       class="number-range__input"
+      :class="{ 'is-error': showInternalError }"
       :placeholder="minPlaceholder"
       :disabled="disabled"
       clearable
@@ -15,6 +16,7 @@
     <el-input
       v-model="maxDisplay"
       class="number-range__input"
+      :class="{ 'is-error': showInternalError }"
       :placeholder="maxPlaceholder"
       :disabled="disabled"
       clearable
@@ -23,15 +25,44 @@
       @blur="onMaxBlur"
       @clear="onMaxClear"
     />
+    <span v-if="showInternalError" class="number-range__error">结束值不能小于起始值</span>
   </div>
 </template>
 
 <script lang="ts">
 import type { FormItemRule } from 'element-plus'
 
-type RangeValue = [number | null, number | null]
+export type RangeValue = [number | string | null, number | string | null]
 type ValidatorCb = (error?: Error) => void
 
+/** 将字符串/数字统一转为 number，空值返回 null */
+function toNum(val: unknown): number | null {
+  if (val === null || val === undefined || val === '') return null
+  const n = Number(val)
+  return Number.isNaN(n) ? null : n
+}
+
+export interface NumberRangeProps {
+  /** 数组模式绑定值 [min, max]，与 start/end 二选一；值可以是 string 或 number */
+  modelValue?: RangeValue
+  /** 双字段模式 - 起始值（支持 string 类型数字） */
+  start?: number | string | null
+  /** 双字段模式 - 结束值（支持 string 类型数字） */
+  end?: number | string | null
+  minPlaceholder?: string
+  maxPlaceholder?: string
+  /** 两个输入框之间的分隔文字 */
+  separator?: string
+  /** 允许输入的最小边界 */
+  min?: number
+  /** 允许输入的最大边界 */
+  max?: number
+  step?: number
+  /** 小数位数限制，如 2 表示最多两位小数 */
+  precision?: number
+  disabled?: boolean
+}
+
 /**
  * NumberRange 数字区间输入组件
  *
@@ -61,10 +92,10 @@ export function rangeRequired(
     trigger,
     validator: startField
       ? (_r: unknown, _v: unknown, cb: ValidatorCb, source: Record<string, unknown>) =>
-          cb(source[startField] == null || source[startField] === '' ? new Error(message) : undefined)
+          cb(toNum(source[startField]) == null ? new Error(message) : undefined)
       : (_r: unknown, v: unknown, cb: ValidatorCb) => {
           const arr = v as RangeValue | undefined
-          cb(!Array.isArray(arr) || arr[0] == null || arr[1] == null ? new Error(message) : undefined)
+          cb(!Array.isArray(arr) || toNum(arr[0]) == null || toNum(arr[1]) == null ? new Error(message) : undefined)
         }
   }
 }
@@ -78,43 +109,26 @@ export function rangeRule(
   return {
     trigger,
     validator: startField
-      ? (_r: unknown, v: unknown, cb: ValidatorCb, source: Record<string, unknown>) =>
-          cb(source[startField] != null && v != null && (v as number) < (source[startField] as number) ? new Error(message) : undefined)
+      ? (_r: unknown, v: unknown, cb: ValidatorCb, source: Record<string, unknown>) => {
+          const startNum = toNum(source[startField])
+          const endNum = toNum(v)
+          cb(startNum != null && endNum != null && endNum < startNum ? new Error(message) : undefined)
+        }
       : (_r: unknown, v: unknown, cb: ValidatorCb) => {
           const arr = v as RangeValue | undefined
-          cb(arr?.[0] != null && arr?.[1] != null && arr[1] < arr[0] ? new Error(message) : undefined)
+          const minNum = toNum(arr?.[0])
+          const maxNum = toNum(arr?.[1])
+          cb(minNum != null && maxNum != null && maxNum < minNum ? new Error(message) : undefined)
         }
   }
 }
 </script>
 
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, inject } from 'vue'
+import { formItemContextKey } from 'element-plus'
 
-type Nullable<T> = T | null | undefined
-
-interface Props {
-  /** 数组模式绑定值 [min, max]，与 start/end 二选一 */
-  modelValue?: RangeValue
-  /** 双字段模式 - 起始值 */
-  start?: number | null
-  /** 双字段模式 - 结束值 */
-  end?: number | null
-  minPlaceholder?: string
-  maxPlaceholder?: string
-  /** 两个输入框之间的分隔文字 */
-  separator?: string
-  /** 允许输入的最小边界 */
-  min?: number
-  /** 允许输入的最大边界 */
-  max?: number
-  step?: number
-  /** 小数位数限制，如 2 表示最多两位小数 */
-  precision?: number
-  disabled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<NumberRangeProps>(), {
   modelValue: undefined,
   start: undefined,
   end: undefined,
@@ -135,18 +149,22 @@ const emit = defineEmits<{
   change: [value: RangeValue]
 }>()
 
+/** 检测是否处于 el-form-item 内，有则交给 form 校验，无则组件内部校验 */
+const formItemContext = inject(formItemContextKey, undefined)
+const useInternalValidation = computed(() => !formItemContext)
+
 /** 根据是否传入 modelValue 自动判断绑定模式 */
 const isArrayMode = computed(() => props.modelValue !== undefined)
 
-function getInitMin(): Nullable<number> {
-  return isArrayMode.value ? props.modelValue?.[0] : props.start
+function getInitMin(): number | null {
+  return toNum(isArrayMode.value ? props.modelValue?.[0] : props.start)
 }
-function getInitMax(): Nullable<number> {
-  return isArrayMode.value ? props.modelValue?.[1] : props.end
+function getInitMax(): number | null {
+  return toNum(isArrayMode.value ? props.modelValue?.[1] : props.end)
 }
 
-function toDisplay(val: Nullable<number>): string {
-  if (val === null || val === undefined) return ''
+function toDisplay(val: number | null): string {
+  if (val === null) return ''
   return String(val)
 }
 
@@ -202,6 +220,12 @@ const rangeInvalid = computed(() => {
 
 const isValid = computed(() => !rangeInvalid.value)
 
+/** 内部校验：仅在无 el-form-item 且两个输入框都失焦后展示 */
+const blurred = ref(false)
+const showInternalError = computed(() =>
+  useInternalValidation.value && blurred.value && rangeInvalid.value
+)
+
 /** 根据绑定模式 emit 对应事件 */
 function emitValue(): void {
   const minVal = formatNum(parseNum(minDisplay.value))
@@ -254,6 +278,7 @@ function onMinBlur(): void {
     minDisplay.value = ''
   }
   emitValue()
+  if (!minFocused.value && !maxFocused.value) blurred.value = true
 }
 
 function onMaxBlur(): void {
@@ -268,9 +293,11 @@ function onMaxBlur(): void {
     maxDisplay.value = ''
   }
   emitValue()
+  if (!minFocused.value && !maxFocused.value) blurred.value = true
 }
 
 function validate(): boolean {
+  blurred.value = true
   return isValid.value
 }
 
@@ -280,13 +307,14 @@ defineExpose({ validate, isValid })
 watch(
   () => isArrayMode.value ? props.modelValue : [props.start, props.end],
   (val) => {
-    const newMin = toDisplay(val?.[0] ?? null)
-    const newMax = toDisplay(val?.[1] ?? null)
+    const newMin = toDisplay(toNum(val?.[0]))
+    const newMax = toDisplay(toNum(val?.[1]))
     if (newMin !== minDisplay.value) minDisplay.value = newMin
     if (newMax !== maxDisplay.value) maxDisplay.value = newMax
-    if ((val?.[0] == null) && (val?.[1] == null)) {
+    if (toNum(val?.[0]) == null && toNum(val?.[1]) == null) {
       minFocused.value = false
       maxFocused.value = false
+      blurred.value = false
     }
   },
   { deep: true }
@@ -298,12 +326,12 @@ watch(
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  flex-wrap: wrap;
-  position: relative;
+  width: 100%;
 }
 
 .number-range__input {
-  width: 140px;
+  flex: 1;
+  min-width: 0;
 }
 
 .number-range__separator {
@@ -315,4 +343,16 @@ watch(
 .number-range.is-disabled .number-range__separator {
   color: var(--el-text-color-placeholder);
 }
+
+.number-range__input.is-error :deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.number-range__error {
+  width: 100%;
+  color: var(--el-color-danger);
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 2px;
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2server7",
-  "version": "7.0.11",
+  "version": "7.0.13",
   "description": "",
   "scripts": {
     "dev": "nodemon --watch src --ext ts --exec \"ts-node src/app.ts\"",