fix(numberkeyboard): add demo (jd-opensource#1294)

penjj · May 17, 2022 · 4d4c41f · 4d4c41f
1 parent e6b93a6
commit 4d4c41f
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 50 deletions.
diff --git a/src/packages/__VUE/numberkeyboard/demo.vue b/src/packages/__VUE/numberkeyboard/demo.vue
@@ -32,6 +32,10 @@
       @close="close(4)"
     >
     </nut-numberkeyboard>
+
+    <nut-cell :isLink="true" @click="showKeyBoard(6)" :showIcon="true" title="身份证键盘"></nut-cell>
+    <nut-numberkeyboard v-model:visible="visible6" :custom-key="customKey3" @input="input" @close="close(6)">
+    </nut-numberkeyboard>
     <nut-cell
       :isLink="true"
       desc-text-align="left"
@@ -57,11 +61,13 @@ export default createDemo({
     const visible2 = ref(false);
     const visible3 = ref(false);
     const visible4 = ref(false);
+    const visible6 = ref(false);
     const visible5 = ref(false);
     const value = ref('');
     const customKey1 = reactive(['.']);
     const customKey2 = reactive(['.']);
-    const visibleArr = [visible1, visible2, visible3, visible4, visible5];
+    const customKey3 = reactive(['X']);
+    const visibleArr = [visible1, visible2, visible3, visible4, visible5, visible6];
     function input(number: any) {
       proxy.$toast.text(`输入：${number}`);
     }
@@ -82,11 +88,13 @@ export default createDemo({
       showKeyBoard,
       customKey1,
       customKey2,
+      customKey3,
       visible1,
       visible2,
       visible3,
       visible4,
       visible5,
+      visible6,
       value
     };
   }

diff --git a/src/packages/__VUE/numberkeyboard/doc.md b/src/packages/__VUE/numberkeyboard/doc.md
@@ -192,6 +192,48 @@ export default{
 </script>
 ```
 :::
+### 身份证键盘
+
+:::demo
+```html
+<template>
+     <nut-cell :isLink="true" @click="showKeyBoard(4)" :showIcon="true" title="身份证键盘"></nut-cell>
+    <nut-numberkeyboard
+      v-model:visible="visible"
+      :custom-key="customKey"
+      @input="input"
+      @close="close"
+    >
+    </nut-numberkeyboard>
+</template>
+<script>
+import { ref,reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default{
+  setup() {
+    const visible = ref(false);
+    const customKey = reactive(['X']);
+    function showKeyBoard() {
+      visible.value = true;
+    }
+    function input(number) {
+      Toast.text(`输入：${number}`);
+    }
+    function close() {
+      visible.value = false;
+    }
+    return {
+      visible,
+      customKey,
+      input,
+      showKeyBoard,
+      close,
+    };
+  }
+  }
+</script>
+```
+:::
 
 ### 双向绑定：
 

diff --git a/src/packages/__VUE/numberkeyboard/index.taro.vue b/src/packages/__VUE/numberkeyboard/index.taro.vue
@@ -120,12 +120,19 @@ export default create({
     const show = ref(props.visible);
     const root = ref<HTMLElement>();
     function defaultKey() {
-      return [
-        ...getBasicKeys(),
-        { id: 'lock', type: 'lock' },
-        { id: 0, type: 'number' },
-        { id: 'delete', type: 'delete' }
-      ];
+      const { customKey } = props;
+      let object = {
+        id: 'lock',
+        type: 'lock'
+      };
+      let customKeys = Array.isArray(customKey) ? customKey : [customKey];
+      if (customKeys.length === 1) {
+        object = {
+          id: customKeys[0],
+          type: 'custom'
+        };
+      }
+      return [...getBasicKeys(), object, { id: 0, type: 'number' }, { id: 'delete', type: 'delete' }];
     }
 
     function getBasicKeys() {

diff --git a/src/packages/__VUE/numberkeyboard/index.vue b/src/packages/__VUE/numberkeyboard/index.vue
@@ -127,12 +127,19 @@ export default create({
     const show = ref(props.visible);
     const root = ref<HTMLElement>();
     function defaultKey() {
-      return [
-        ...getBasicKeys(),
-        { id: 'lock', type: 'lock' },
-        { id: 0, type: 'number' },
-        { id: 'delete', type: 'delete' }
-      ];
+      const { customKey } = props;
+      let object = {
+        id: 'lock',
+        type: 'lock'
+      };
+      let customKeys = Array.isArray(customKey) ? customKey : [customKey];
+      if (customKeys.length === 1) {
+        object = {
+          id: customKeys[0],
+          type: 'custom'
+        };
+      }
+      return [...getBasicKeys(), object, { id: 0, type: 'number' }, { id: 'delete', type: 'delete' }];
     }
 
     function getBasicKeys() {

diff --git a/src/sites/mobile-taro/vue/src/dentry/pages/numberkeyboard/index.vue b/src/sites/mobile-taro/vue/src/dentry/pages/numberkeyboard/index.vue
@@ -1,24 +1,9 @@
 <template>
   <div class="demo full">
-    <nut-cell
-      :isLink="true"
-      @click="showKeyBoard(1)"
-      :showIcon="true"
-      title="默认键盘"
-    ></nut-cell>
-    <nut-numberkeyboard
-      v-model:visible="visible1"
-      @input="input"
-      @delete="onDelete"
-      @close="close(1)"
-    >
+    <nut-cell :isLink="true" @click="showKeyBoard(1)" :showIcon="true" title="默认键盘"></nut-cell>
+    <nut-numberkeyboard v-model:visible="visible1" @input="input" @delete="onDelete" @close="close(1)">
     </nut-numberkeyboard>
-    <nut-cell
-      :isLink="true"
-      @click="showKeyBoard(2)"
-      :showIcon="true"
-      title="带右侧栏键盘"
-    ></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard(2)" :showIcon="true" title="带右侧栏键盘"></nut-cell>
     <nut-numberkeyboard
       type="rightColumn"
       v-model:visible="visible2"
@@ -27,12 +12,7 @@
       @close="close(2)"
     >
     </nut-numberkeyboard>
-    <nut-cell
-      :isLink="true"
-      @click="showKeyBoard(3)"
-      :showIcon="true"
-      title="随机数键盘"
-    ></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard(3)" :showIcon="true" title="随机数键盘"></nut-cell>
     <nut-numberkeyboard
       type="rightColumn"
       v-model:visible="visible3"
@@ -43,12 +23,7 @@
     >
     </nut-numberkeyboard>
 
-    <nut-cell
-      :isLink="true"
-      @click="showKeyBoard(4)"
-      :showIcon="true"
-      title="带标题栏键盘"
-    ></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard(4)" :showIcon="true" title="带标题栏键盘"></nut-cell>
     <nut-numberkeyboard
       title="默认键盘"
       v-model:visible="visible4"
@@ -57,17 +32,15 @@
       @close="close(4)"
     >
     </nut-numberkeyboard>
+    <nut-cell :isLink="true" @click="showKeyBoard(6)" :showIcon="true" title="身份证键盘"></nut-cell>
+    <nut-numberkeyboard v-model:visible="visible6" :custom-key="customKey3" @input="input" @close="close(6)">
+    </nut-numberkeyboard>
     <div class="boardValue" @click="showKeyBoard(5)">
       <div class="value">
         <nut-input v-model="value" readonly label="双向绑定：" />
       </div>
     </div>
-    <nut-numberkeyboard
-      v-model:visible="visible5"
-      v-model:value="value"
-      maxlength="6"
-      @close="close(5)"
-    >
+    <nut-numberkeyboard v-model:visible="visible5" v-model:value="value" maxlength="6" @close="close(5)">
     </nut-numberkeyboard>
   </div>
 </template>
@@ -82,10 +55,12 @@ export default {
     const visible3 = ref(false);
     const visible4 = ref(false);
     const visible5 = ref(false);
+    const visible6 = ref(false);
     const value = ref('');
     const customKey1 = reactive(['.']);
     const customKey2 = reactive(['.']);
-    const visibleArr = [visible1, visible2, visible3, visible4, visible5];
+    const customKey3 = reactive(['X']);
+    const visibleArr = [visible1, visible2, visible3, visible4, visible5, visible6];
     function input(number: any) {}
     function showKeyBoard(index: number) {
       visibleArr[index - 1].value = true;
@@ -102,11 +77,13 @@ export default {
       showKeyBoard,
       customKey1,
       customKey2,
+      customKey3,
       visible1,
       visible2,
       visible3,
       visible4,
       visible5,
+      visible6,
       value
     };
   }