Merge pull request #838 from wsd000/feat_license_plate_keyboard

书写规范类修复

components/license-plate-input/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="input-widget">
+  <div class="md-license-plate-input">
     <div
       v-for="(item, index) in keyArray"
       :key="index"
-      class="input-item"
+      class="md-license-plate-input-item"
       :class="{
         'active': selectedIndex === index,
         'animation': selectedIndex === index && !item
@@ -13,14 +13,14 @@
       <!-- 非新能源键位 -->
       <div
         v-if="index !== keyArray.length-1"
-        class="input-item_content"
+        class="md-license-plate-input-item_content"
       >
         {{ item }}
       </div>
       <!-- 新能源键位 -->
       <div
         v-else
-        class="input-item_content"
+        class="md-license-plate-input-item_content"
       >
         <div v-if="item">{{ item }}</div>
         <div v-else class="emptyValue">
@@ -33,7 +33,7 @@
 </template>
 
 <script>
export default {
-  name: 'license-plate-input',
+  name: 'md-license-plate-input',
 
   components: {},
 
@@ -62,10 +62,10 @@
 }
 
</script>
 
-<style lang="stylus" scoped>
-.input-widget{
+<style lang="stylus">
+.md-license-plate-input{
   display: flex;
-  .input-item{
+  .md-license-plate-input-item{
     width: 64px;
     height: 94px;
     background: #F4F8FF;
@@ -101,7 +101,7 @@
       }
     }
   }
-  >.input-item:nth-child(2){
+  >.md-license-plate-input-item:nth-child(2){
     margin-right: 28px;
     position: relative;
     &::after{
@@ -116,7 +116,7 @@
       transform: translate(-50%, -50%);
     }
   }
-  >.input-item:last-child{
+  >.md-license-plate-input-item:last-child{
     margin-right: 0px;
     background: #E8FBE7;
     border: 1px solid rgba(203,242,201,1);
@@ -124,10 +124,10 @@
     font-size: 16px;
     color: #61686F;
   }
-  .input-item.active{
+  .md-license-plate-input-item.active{
     border-color: rgba(25,140,255,1);
   }
-  .input-item.active.animation{
+  .md-license-plate-input-item.active.animation{
     animation keyboard-cursor 1s step-start 2s
   }
 

components/license-plate-keyboard/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="keyboard-container">
+  <div class="md-license-plate-keyboard">
     <div v-if="keyboardType === 1">
       <shortcut-view
         :shortcuts="shortcuts"
@@ -21,7 +21,7 @@
 import shortcutView from './short-cut-view.vue'
 
 export default {
-  name: 'license-plate-keyboard',
+  name: 'md-license-plate-keyboard',
 
   components: {
     keyboardView,

components/license-plate-keyboard/key-board-view.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="mixed-key-container">
+  <div class="md-mixed-key-board">
     <div
       v-for="(item, index) in mixedKeyboard"
       :key="index"
-      class="mixed-key-item"
+      class="md-mixed-key-board-item"
       :class="{disabled: item.disabled}"
     >
       <template v-if="item.type">
@@ -15,8 +15,8 @@
             disabled: item.disabled
           }"
         >
-          <img v-if="item.imgUrl" :src="item.imgUrl"/>
-          <div v-if="item.text">{{ item.text }}</div>
+          <img v-if="item.type === 'delete'" src="./assets/close.png"/>
+          <div v-if="item.type === 'confirm' && item.text">{{ item.text }}</div>
         </div>
       </template>
       <template v-else>
@@ -32,7 +32,7 @@
 </template>
 
 <script>
export default {
-  name: 'mixed-key-board',
+  name: 'md-mixed-key-board',
 
   components: {},
 
@@ -64,12 +64,12 @@
 }
 
</script>
 
-<style lang="stylus" scoped>
-.mixed-key-container {
+<style lang="stylus">
+.md-mixed-key-board {
   padding: 32px 0px;
   display: flex;
   flex-wrap: wrap;
-  .mixed-key-item {
+  .md-mixed-key-board-item {
     >div{
       display: flex;
       align-items: center;

components/license-plate-keyboard/short-cut-view.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="shortcut-container">
+  <div class="md-shortcut-row">
     <div
       v-for="(item, index) in shortcuts"
       :key="index"
-      class="shortcut-item"
+      class="md-shortcut-row-item"
       v-tap="{ methods: $_onEnter }"
     >{{ item }}</div>
   </div>
 </template>
 
 <script>
export default {
-  name: 'shortcut-row',
+  name: 'md-shortcut-row',
 
   components: {},
 
@@ -36,12 +36,12 @@
 }
 
</script>
 
-<style lang="stylus" scoped>
-.shortcut-container {
+<style lang="stylus">
+.md-shortcut-row {
   padding: 32px 10px;
   display: flex;
   flex-wrap: wrap;
-  .shortcut-item {
+  .md-shortcut-row-item {
     display: flex;
     align-items: center;
     justify-content: center;

components/license-plate/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="license-plate-container">
+  <div class="md-license-plate">
     <div v-if="modeShow === 'division'">
       <div
-        class="input-container division"
+        class="md-license-plate-input-container division"
         :id="inputViewId"
       >
         <license-plate-input
@@ -13,7 +13,7 @@
       </div>
       <div
         v-if="showDivisionKeyboard"
-        class="keyboard-container division"
+        class="md-license-plate-keyboard-container division"
         :id="keyboardViewId"
       >
         <license-plate-keyboard
@@ -40,14 +40,14 @@
           @cancel="$_onHide"
         ></md-popup-title-bar>
         <div class="md-popup-content">
-          <div class="input-container popUp">
+          <div class="md-license-plate-input-container popUp">
             <license-plate-input
               :keyArray="keyArray"
               :selectedIndex="dyCurrentIndex"
               @keyMapping="keyMapping"
             />
           </div>
-          <div class="keyboard-container popUp">
+          <div class="md-license-plate-keyboard-container popUp">
             <license-plate-keyboard
               :keyboard="dyKeyboard"
               @enter="$_onEnter"
@@ -336,7 +336,6 @@ export default {
         // 删除键
         letterData.splice(19, 0, {
           type: 'delete',
-          imgUrl: require('./assets/close.png'),
           disabled: false,
         })
         // 确定键
@@ -452,23 +451,25 @@ export default {
 
</script>
 
 
-<style lang="stylus" scoped>
-.keyboard-container {
-  width: 100%;
-  background: #D9E0E7;
-  &.division {
-    padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
-    position: fixed;
-    bottom: 0px;
-    left: 0px;
-    z-index: 99999;
+<style lang="stylus">
+.md-license-plate {
+  .md-license-plate-keyboard-container {
+    width: 100%;
+    background: #D9E0E7;
+    &.division {
+      padding-bottom: constant(safe-area-inset-bottom);
+      padding-bottom: env(safe-area-inset-bottom);
+      position: fixed;
+      bottom: 0px;
+      left: 0px;
+      z-index: 99999;
+    }
   }
-}
-.input-container{
-  &.popUp{
-    background: #fff;
-    padding: 20px 40px 40px;
+  .md-license-plate-input-container{
+    &.popUp{
+      background: #fff;
+      padding: 20px 40px 40px;
+    }
   }
 }
 </style>