feat: 增加自定义键盘弹窗内容demo

didi · Jul 4, 2024 · 0a7f5ea · 0a7f5ea
1 parent a38c6c7
commit 0a7f5ea
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 31 deletions.
diff --git a/components/license-plate/demo/cases/demo1.vue b/components/license-plate/demo/cases/demo1.vue
@@ -16,14 +16,6 @@
       @onEnter="onEnter"
       @onDelete="onDelete"
     >
-    <template v-slot:content>
-      <md-button
-        class="go-to-quote"
-        type="primary"
-      >
-        查看报价
-      </md-button>
-    </template>
     </md-license-plate>
   </div>
 </template>
@@ -65,25 +57,3 @@ export default {
   },
 }
 </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/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>