feat: 🎸 [PasswordInput 密码输入框]支持type:idCard身份证后4位

CodeLittlePrince · Jan 13, 2025 · 1fea83c · 1fea83c
1 parent ea147ef
commit 1fea83c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/doc/base/password-input.md b/doc/base/password-input.md
@@ -65,7 +65,7 @@
 <template>
   <div class="md-demo-password-input">
     <sp-password-input 
-      type="number"
+      type="idCard"
       :length="4"
       v-model="value3" 
     />
@@ -94,7 +94,7 @@
 
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
-| type         | 类型   | string  | password，number | password
+| type         | 类型   | string  | password，number，idCard（身份证后4位） | password
 | validateEvent         | 验证   | boolean  | —  |true
 | value         | 绑定值           | string / number  | — | — |
 | length         | 输入框长度           | number  | — |6

diff --git a/sparta/components/base/password-input/src/index.vue b/sparta/components/base/password-input/src/index.vue
@@ -44,7 +44,7 @@ export default {
     type: {
       type: String,
       default: 'password',
-      validator: (val) => ['password', 'number'].includes(val)
+      validator: (val) => ['password', 'number', 'idCard'].includes(val)
     },
     validateEvent: {
       type: Boolean,
@@ -57,7 +57,7 @@ export default {
   },
   data() {
     return {
-      code: this.value,
+      code: '',
       isFocus: false,
     }
   },
@@ -71,7 +71,7 @@ export default {
   },
   watch: {
     code(newVal, oldVal) {
-      if (newVal.replace(/[^\d]/g, '') != newVal || (newVal && newVal.length > this.length)) {
+      if (!this.isValidateCode(newVal)) {
         this.code = oldVal
         return false
       }
@@ -83,14 +83,27 @@ export default {
     }
   },
   mounted() {
+    this.setCurrentValue(this.value)
     document.addEventListener('click', this.handleOtherAreaClick)
   },
   beforeDestroy() {
     document.removeEventListener('click', this.handleOtherAreaClick)
   },
   methods: {
     setCurrentValue(value) {
-      this.code = value
+      this.code = this.isValidateCode(value) ? value?.toString().toUpperCase() : this.code
+    },
+    isValidateCode(value) {
+      if(value && value.length > this.length) {
+        return
+      }
+      if (value && ['password', 'number'].includes(this.type) && value.replace(/[^\d]/g, '') != value) {
+        return
+      }
+      if(value && this.type === 'idCard' && !/^\d{1,3}$|^\d{3}[xX]$|^\d{4}$/.test(value)) {
+        return
+      }
+      return true
     },
     handleFocus() {
       this.isFocus = true