feat: 增加车牌键入组件-修改方法名

didi · Nov 16, 2023 · 30f9926 · 30f9926
1 parent 6763aaa
commit 30f9926
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 46 deletions.
diff --git a/components/license-plate-input/index.vue b/components/license-plate-input/index.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="input-widget">
     <div
-      v-for="(item, index) in valueArray"
+      v-for="(item, index) in keyArray"
       :key="index"
       class="input-item"
       :class="{
         'active': selectedIndex === index,
         'animation': selectedIndex === index && !item
       }"
-      @click="inputClick(index)"
+      @click="keyMapping(index)"
     >
       <!-- 非新能源键位 -->
       <div
-        v-if="index !== valueArray.length-1"
+        v-if="index !== keyArray.length-1"
         class="input-item_content"
       >
         {{ item }}
@@ -38,7 +38,7 @@
   components: {},
 
   props: {
-    valueArray: {
+    keyArray: {
       type: Array,
       default: () => {
         return []
@@ -55,8 +55,8 @@
   },
 
   methods: {
-    inputClick(index) {
-      this.$emit('inputClick', index)
+    keyMapping(index) {
+      this.$emit('keyMapping', index)
     },
   },
 }

diff --git a/components/license-plate-keyboard/index.vue b/components/license-plate-keyboard/index.vue
@@ -3,15 +3,15 @@
     <div v-if="keyboardType === 1">
       <shortcut-view
         :shortcuts="shortcuts"
-        @keyClick="keyClick"
+        @enter="$_onEnter"
       />
     </div>
     <div v-else>
       <keyboard-view
         :mixedKeyboard="mixedKeyboard"
-        @keyClick="keyClick"
-        @deleteClick="deleteClick"
-        @confirmClick="confirmClick"
+        @enter="$_onEnter"
+        @delete="$_onDelete"
+        @confirm="$_onConfirm"
       />
     </div>
   </div>
@@ -55,14 +55,14 @@ export default {
   },
 
   methods: {
-    keyClick(value) {
-      this.$emit('keyClick', value)
+    $_onEnter(value) {
+      this.$emit('enter', value)
     },
-    deleteClick() {
-      this.$emit('deleteClick')
+    $_onDelete() {
+      this.$emit('delete')
     },
-    confirmClick() {
-      this.$emit('confirmClick')
+    $_onConfirm() {
+      this.$emit('confirm')
     },
   },
 }

diff --git a/components/license-plate-keyboard/key-board-view.vue b/components/license-plate-keyboard/key-board-view.vue
@@ -11,7 +11,7 @@
           :class="item.type"
           v-tap="{
             methods:
-              item.type === 'delete' ? deleteClick : confirmClick,
+              item.type === 'delete' ? $_onDelete : $_onConfirm,
             disabled: item.disabled
           }"
         >
@@ -22,7 +22,7 @@
       <template v-else>
         <div
           v-tap="{
-            methods: keyClick,
+            methods: $_onEnter,
             disabled: item.disabled
           }"
         >{{ item.value }}</div>
@@ -51,14 +51,14 @@
   },
 
   methods: {
-    keyClick(value) {
-      this.$emit('keyClick', value)
+    $_onEnter(value) {
+      this.$emit('enter', value)
     },
-    deleteClick() {
-      this.$emit('deleteClick')
+    $_onDelete() {
+      this.$emit('delete')
     },
-    confirmClick() {
-      this.$emit('confirmClick')
+    $_onConfirm() {
+      this.$emit('confirm')
     },
   },
 }

diff --git a/components/license-plate-keyboard/short-cut-view.vue b/components/license-plate-keyboard/short-cut-view.vue
@@ -4,7 +4,7 @@
       v-for="(item, index) in shortcuts"
       :key="index"
       class="shortcut-item"
-      v-tap="{ methods: keyClick }"
+      v-tap="{ methods: $_onEnter }"
     >{{ item }}</div>
   </div>
 </template>
@@ -29,8 +29,8 @@
   },
 
   methods: {
-    keyClick(value) {
-      this.$emit('keyClick', value)
+    $_onEnter(value) {
+      this.$emit('enter', value)
     },
   },
 }

diff --git a/components/license-plate/index.vue b/components/license-plate/index.vue
@@ -6,9 +6,9 @@
         :id="inputViewId"
       >
         <license-plate-input
-          :valueArray="valueArray"
+          :keyArray="keyArray"
           :selectedIndex="dyCurrentIndex"
-          @inputClick="inputClick"
+          @keyMapping="keyMapping"
         />
       </div>
       <div
@@ -18,9 +18,9 @@
       >
         <license-plate-keyboard
           :keyboard="dyKeyboard"
-          @keyClick="$_onKeyClick"
-          @deleteClick="$_onDeleteClick"
-          @confirmClick="$_onConfirm"
+          @enter="$_onEnter"
+          @delete="$_onDelete"
+          @confirm="$_onConfirm"
         />
       </div>
     </div>
@@ -42,17 +42,17 @@
         <div class="md-popup-content">
           <div class="input-container popUp">
             <license-plate-input
-              :valueArray="valueArray"
+              :keyArray="keyArray"
               :selectedIndex="dyCurrentIndex"
-              @inputClick="inputClick"
+              @keyMapping="keyMapping"
             />
           </div>
           <div class="keyboard-container popUp">
             <license-plate-keyboard
               :keyboard="dyKeyboard"
-              @keyClick="$_onKeyClick"
-              @deleteClick="$_onDeleteClick"
-              @confirmClick="$_onConfirm"
+              @enter="$_onEnter"
+              @delete="$_onDelete"
+              @confirm="$_onConfirm"
             />
           </div>
         </div>
@@ -302,7 +302,7 @@ export default {
         },
       ],
       // 用户输入的车牌数据
-      valueArray: (this.defaultValue && this.defaultValue.split('')) || ['', '', '', '', '', '', '', ''],
+      keyArray: (this.defaultValue && this.defaultValue.split('')) || ['', '', '', '', '', '', '', ''],
       selectedIndex: 0, // 当前用户输入框已选中的序号
       showDivisionKeyboard: false,
       inputViewId: unique() + '_divisionInput',
@@ -376,15 +376,15 @@ export default {
   },
 
   methods: {
-    inputClick(index) {
+    keyMapping(index) {
       // 展示键盘
       if (!this.showDivisionKeyboard) {
         this.showDivisionKeyboard = true
         // 抛出展示分离键盘事件
         this.$emit('sdKeyboard')
       }
       // 顺序填写，不可无序点击
-      if (!this.valueArray[index + 1] && !this.valueArray[index - 1]) {
+      if (!this.keyArray[index + 1] && !this.keyArray[index - 1]) {
         return
       }
       this.selectedIndex = index
@@ -394,21 +394,21 @@ export default {
       this.$emit('hide')
     },
     // 键入事件
-    $_onKeyClick(value) {
+    $_onEnter(value) {
       // 重置键位值
-      this.$set(this.valueArray, this.selectedIndex, value)
+      this.$set(this.keyArray, this.selectedIndex, value)
 
       // 点击的是最后一个键位值，掩藏键盘，自动执行确认事件
-      if (this.selectedIndex === this.valueArray.length - 1) {
+      if (this.selectedIndex === this.keyArray.length - 1) {
         this.$_onConfirm()
       } else {
         this.selectedIndex = this.selectedIndex + 1
       }
     },
     // 删除事件
-    $_onDeleteClick() {
+    $_onDelete() {
       // 清空当前键位值
-      this.$set(this.valueArray, this.selectedIndex, '')
+      this.$set(this.keyArray, this.selectedIndex, '')
 
       // 当前键位是第一个键位，隐藏分离键盘
       if (this.selectedIndex <= 0) {
@@ -424,7 +424,7 @@ export default {
       if (this.modeShow === 'division') {
         this.hideDivisionKeyboard()
       }
-      this.$emit('confirm', this.valueArray.join(''))
+      this.$emit('confirm', this.keyArray.join(''))
     },
     // 隐藏分离键盘
     hideDivisionKeyboard(e) {