Merge pull request #857 from shangguanjianming1/feat_license_plate_slot

feat: 车牌组件增加插槽 & 弹窗click穿透修复
didi · Jul 5, 2024 · 47a190c · 47a190c
2 parents 2579c52 + 0a7f5ea
commit 47a190c
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 5 deletions.
diff --git a/components/license-plate/README.en-US.md b/components/license-plate/README.en-US.md
@@ -36,3 +36,6 @@ hide Pop
 
 ##### @confirm()
 confirm
+
+#### content
+slot of content
diff --git a/components/license-plate/README.md b/components/license-plate/README.md
@@ -36,3 +36,6 @@ Vue.component(LicensePlate.name, LicensePlate)
 
 ##### @confirm()
 键盘确认事件
+
+#### content
+slot of content
diff --git a/components/license-plate/demo/cases/demo1.vue b/components/license-plate/demo/cases/demo1.vue
@@ -13,11 +13,14 @@
       :showPopUp="showPopUp"
       @hide="hide"
       @confirm="confirm"
-    ></md-license-plate>
+      @onEnter="onEnter"
+      @onDelete="onDelete"
+    >
+    </md-license-plate>
   </div>
 </template>
 
-<script>import {LicensePlate, DetailItem, Field} from 'mand-mobile'
+<script>import {LicensePlate, DetailItem, Field, Button} from 'mand-mobile'
 
 export default {
   name: 'license-plate-demo',
@@ -26,6 +29,7 @@ export default {
     [LicensePlate.name]: LicensePlate,
     [DetailItem.name]: DetailItem,
     [Field.name]: Field,
+    [Button.name]: Button,
   },
   data() {
     return {
@@ -44,6 +48,12 @@ export default {
       this.hide()
       this.licensePlate = value
     },
+    onEnter(value) {
+      this.licensePlate = value
+    },
+    onDelete(value) {
+      this.licensePlate = value
+    },
   },
 }
 </script>

diff --git a/components/license-plate/demo/cases/demo2.vue b/components/license-plate/demo/cases/demo2.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <!-- 投保人车牌号 -->
+    <md-field title="车辆信息">
+      <div @click="changeNumber">
+        <md-detail-item title="车牌号码">
+          {{ licensePlate }}
+        </md-detail-item>
+      </div>
+    </md-field>
+    <md-license-plate
+      :modeShow="'popUp'"
+      :showPopUp="showPopUp"
+      @hide="hide"
+      @confirm="confirm"
+      @onEnter="onEnter"
+      @onDelete="onDelete"
+    >
+    <template v-slot:content>
+      <md-button
+        class="go-to-quote"
+        type="primary"
+      >
+        按钮
+      </md-button>
+    </template>
+    </md-license-plate>
+  </div>
+</template>
+
+<script>import {LicensePlate, DetailItem, Field, Button} from 'mand-mobile'
+
+export default {
+  name: 'license-plate-demo',
+  title: '自定义键盘弹窗内容插槽半弹层版',
+  components: {
+    [LicensePlate.name]: LicensePlate,
+    [DetailItem.name]: DetailItem,
+    [Field.name]: Field,
+    [Button.name]: Button,
+  },
+  data() {
+    return {
+      showPopUp: false,
+      licensePlate: '',
+    }
+  },
+  methods: {
+    hide() {
+      this.showPopUp = false
+    },
+    changeNumber() {
+      this.showPopUp = true
+    },
+    confirm(value) {
+      this.hide()
+      this.licensePlate = value
+    },
+    onEnter(value) {
+      this.licensePlate = value
+    },
+    onDelete(value) {
+      this.licensePlate = value
+    },
+  },
+}
+</script>
+
+
+<style lang="stylus" scoped>
+.md-button {
+  width: 670px;
+  height: 100px;
+  border-radius: 50px;
+  background: #198CFF;
+  border 0
+  margin 0 auto
+  margin-bottom 40px
+}
+.md-button.block {
+  width: 670px;
+}
+.md-button.primary:after {
+  border 0
+}
+>>>.md-license-plate-input .md-license-plate-input-item {
+  width 72px
+}
+</style>

diff --git a/components/license-plate/demo/index.vue b/components/license-plate/demo/index.vue
@@ -13,6 +13,7 @@
 <script>import createDemoModule from '../../../examples/create-demo-module'
 import Demo0 from './cases/demo0'
 import Demo1 from './cases/demo1'
+import Demo2 from './cases/demo2'
 
-export default {...createDemoModule('license-plate', [Demo0, Demo1])}
+export default {...createDemoModule('license-plate', [Demo0, Demo1, Demo2])}
 </script>

diff --git a/components/license-plate/index.vue b/components/license-plate/index.vue
@@ -47,6 +47,7 @@
               @keyMapping="keyMapping"
             />
           </div>
+          <slot name="content"></slot>
           <div class="md-license-plate-keyboard-container popUp">
             <md-license-plate-keyboard
               :keyboard="dyKeyboard"
@@ -418,6 +419,7 @@ export default {
       } else {
         this.selectedIndex = this.selectedIndex + 1
       }
+      this.$emit('onEnter', this.keyArrayCopy.join(''))
     },
     // 删除事件
     $_onDelete() {
@@ -427,16 +429,23 @@ export default {
       // 当前键位是第一个键位，隐藏分离键盘
       if (this.selectedIndex <= 0) {
         if (this.modeShow === 'division') {
-          this.hideDivisionKeyboard()
+          const timeId = setTimeout(() => {
+            this.hideDivisionKeyboard()
+            clearTimeout(timeId)
+          }, 200)
         }
       } else {
         this.selectedIndex = this.selectedIndex - 1
       }
+      this.$emit('onDelete', this.keyArrayCopy.join(''))
     },
     // 键盘确认事件
     $_onConfirm() {
       if (this.modeShow === 'division') {
-        this.hideDivisionKeyboard()
+        const timeId = setTimeout(() => {
+          this.hideDivisionKeyboard()
+          clearTimeout(timeId)
+        }, 200)
       }
       this.$emit('confirm', this.keyArrayCopy.join(''))
     },