Merge pull request #841 from wsd000/feat_license_plate_keyboard

feat: 修复打包及组件默认值的问题ard
didi · Nov 20, 2023 · f6d2da1 · f6d2da1
2 parents 87d8c22 + 8ea1fba
commit f6d2da1
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 26 deletions.
diff --git a/...s/license-plate-keyboard/assets/close.png → ...ts/_style/images/license-keyboard-del.png b/...s/license-plate-keyboard/assets/close.png → ...ts/_style/images/license-keyboard-del.png
diff --git a/components/license-plate-keyboard/index.vue b/components/license-plate-keyboard/index.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="md-license-plate-keyboard">
     <div v-if="keyboardType === 1">
-      <shortcut-view
+      <md-shortcut-row
         :shortcuts="shortcuts"
         @enter="$_onEnter"
       />
     </div>
     <div v-else>
-      <keyboard-view
+      <md-mixed-key-board
         :mixedKeyboard="mixedKeyboard"
         @enter="$_onEnter"
         @delete="$_onDelete"
@@ -17,15 +17,15 @@
   </div>
 </template>
 
-<script>import keyboardView from './key-board-view.vue'
-import shortcutView from './short-cut-view.vue'
+<script>import MixedKeyBoard from './mixed-key-board'
+import ShortcutRow from './short-cut-row'
 
 export default {
   name: 'md-license-plate-keyboard',
 
   components: {
-    keyboardView,
-    shortcutView,
+    [MixedKeyBoard.name]: MixedKeyBoard,
+    [ShortcutRow.name]: ShortcutRow,
   },
 
   props: {

diff --git a/...license-plate-keyboard/key-board-view.vue → ...icense-plate-keyboard/mixed-key-board.vue b/...license-plate-keyboard/key-board-view.vue → ...icense-plate-keyboard/mixed-key-board.vue
@@ -15,7 +15,6 @@
             disabled: item.disabled
           }"
         >
-          <img v-if="item.type === 'delete'" src="./assets/close.png"/>
           <div v-if="item.type === 'confirm' && item.text">{{ item.text }}</div>
         </div>
       </template>
@@ -85,10 +84,9 @@
       font-weight: 400;
       margin: 0px 0px 10px 10px;
       &.delete{
-        img{
-          width: 40px;
-          height: 40px;
-        }
+        background: url(../_style/images/license-keyboard-del.png) center no-repeat;
+        background-color: #FFFFFF;
+        background-size: 40px 40px;
       }
       &.confirm{
         width: 212px;

diff --git a/...license-plate-keyboard/short-cut-view.vue → .../license-plate-keyboard/short-cut-row.vue b/...license-plate-keyboard/short-cut-view.vue → .../license-plate-keyboard/short-cut-row.vue
diff --git a/components/license-plate/demo/cases/demo0.vue b/components/license-plate/demo/cases/demo0.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <md-license-plate :stackViewBody="'#licensePlateContainer'"></md-license-plate>
+    <md-license-plate :defaultValue="defaultValue"></md-license-plate>
   </div>
 </template>
 
@@ -12,7 +12,14 @@ export default {
     [LicensePlate.name]: LicensePlate,
   },
   data() {
-    return {}
+    return {
+      defaultValue: '',
+    }
+  },
+  mounted() {
+    // setTimeout(()=>{
+    //   this.defaultValue = '23338888888'
+    // },10000)
   },
   methods: {},
 }

diff --git a/components/license-plate/index.vue b/components/license-plate/index.vue
@@ -5,7 +5,7 @@
         class="md-license-plate-input-container division"
         :id="inputViewId"
       >
-        <license-plate-input
+        <md-license-plate-input
           :keyArray="keyArray"
           :selectedIndex="dyCurrentIndex"
           @keyMapping="keyMapping"
@@ -16,7 +16,7 @@
         class="md-license-plate-keyboard-container division"
         :id="keyboardViewId"
       >
-        <license-plate-keyboard
+        <md-license-plate-keyboard
           :keyboard="dyKeyboard"
           @enter="$_onEnter"
           @delete="$_onDelete"
@@ -41,14 +41,14 @@
         ></md-popup-title-bar>
         <div class="md-popup-content">
           <div class="md-license-plate-input-container popUp">
-            <license-plate-input
+            <md-license-plate-input
               :keyArray="keyArray"
               :selectedIndex="dyCurrentIndex"
               @keyMapping="keyMapping"
             />
           </div>
           <div class="md-license-plate-keyboard-container popUp">
-            <license-plate-keyboard
+            <md-license-plate-keyboard
               :keyboard="dyKeyboard"
               @enter="$_onEnter"
               @delete="$_onDelete"
@@ -61,8 +61,8 @@
   </div>
 </template>
 
-<script>import licensePlateKeyboard from '../license-plate-keyboard'
-import licensePlateInput from '../license-plate-input'
+<script>import LicensePlateKeyboard from '../license-plate-keyboard'
+import LicensePlateInput from '../license-plate-input'
 import Popup from '../popup'
 import PopupTitlebar from '../popup/title-bar'
 import {directiveInit, queryCurParentNode, unique} from './util'
@@ -71,8 +71,8 @@ export default {
   name: 'md-license-plate',
 
   components: {
-    licensePlateKeyboard,
-    licensePlateInput,
+    [LicensePlateKeyboard.name]: LicensePlateKeyboard,
+    [LicensePlateInput.name]: LicensePlateInput,
     [Popup.name]: Popup,
     [PopupTitlebar.name]: PopupTitlebar,
   },
@@ -302,7 +302,7 @@ export default {
         },
       ],
       // 用户输入的车牌数据
-      keyArray: (this.defaultValue && this.defaultValue.split('')) || ['', '', '', '', '', '', '', ''],
+      keyArray: ['', '', '', '', '', '', '', ''],
       selectedIndex: 0, // 当前用户输入框已选中的序号
       showDivisionKeyboard: false,
       inputViewId: unique() + '_divisionInput',
@@ -367,6 +367,16 @@ export default {
         keyboardType,
       }
     },
+    // 健值为null特殊处理
+    keyArrayCopy() {
+      return this.keyArray.map(item => {
+        if (item) {
+          return item
+        } else {
+          return ' '
+        }
+      })
+    },
   },
 
   created() {
@@ -380,10 +390,10 @@ export default {
       if (!this.showDivisionKeyboard) {
         this.showDivisionKeyboard = true
         // 抛出展示分离键盘事件
-        this.$emit('sdKeyboard')
+        this.$emit('sdKeyboard', this.keyboardViewId)
       }
       // 顺序填写，不可无序点击
-      if (!this.keyArray[index + 1] && !this.keyArray[index - 1]) {
+      if (!this.keyArray[index + 1] && !this.keyArray[index - 1] && index > 0) {
         return
       }
       this.selectedIndex = index
@@ -423,7 +433,7 @@ export default {
       if (this.modeShow === 'division') {
         this.hideDivisionKeyboard()
       }
-      this.$emit('confirm', this.keyArray.join(''))
+      this.$emit('confirm', this.keyArrayCopy.join(''))
     },
     // 隐藏分离键盘
     hideDivisionKeyboard(e) {
@@ -434,7 +444,7 @@ export default {
       if (this.showDivisionKeyboard && !isKeyboard) {
         this.showDivisionKeyboard = false
         // 抛出隐藏分离键盘事件
-        this.$emit('hdKeyboard')
+        this.$emit('hdKeyboard', this.keyArrayCopy.join(''))
       }
     },
   },
@@ -447,6 +457,28 @@ export default {
   beforeDestroy() {
     this.modeShow === 'division' && document.removeEventListener('click', this.hideDivisionKeyboard)
   },
+
+  watch: {
+    defaultValue: {
+      handler(newVal) {
+        if (newVal !== '') {
+          const defaultValueArray = this.defaultValue.split('')
+          const keyArrayCopy = JSON.parse(JSON.stringify(this.keyArray))
+
+          keyArrayCopy.forEach((item, index) => {
+            if (defaultValueArray[index]) {
+              keyArrayCopy[index] = defaultValueArray[index]
+            } else {
+              keyArrayCopy[index] = ''
+            }
+          })
+
+          this.keyArray = keyArrayCopy
+        }
+      },
+      immediate: true,
+    },
+  },
 }
 </script>