fix: numberkeyboard add overlay props

src/packages/__VUE/numberkeyboard/demo.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,28 +12,18 @@
       @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"
-      randomKeys="true"
+      :randomKeys="true"
       :custom-key="customKey1"
       @input="input"
       @close="close(3)"
     >
     </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"
@@ -65,12 +40,7 @@
       :showIcon="true"
       title="双向绑定："
     ></nut-cell>
-    <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>

src/packages/__VUE/numberkeyboard/doc.md

@@ -51,14 +51,14 @@ app.use(Popup);
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| visible | 是否显示键盘 | boolean | false
-| title | 键盘标题 | string | - |
-| type | 键盘模式  | string | `default`：默认样式<br>`rightColumn`：带右侧栏 |
+| v-model:visible | 是否显示键盘 | Boolean | false
+| title | 键盘标题 | String | - |
+| type | 键盘模式  | String | `default`：默认样式<br>`rightColumn`：带右侧栏 |
+| random-keys | 随机数  | Boolean | false |
 | custom-key | 自定义键盘额外的键  | array<br>string | 数组形式最多支持添加2个,超出默认取前2项 |
-| v-model | 当前输入值 | string | - |
-| maxlength  | 输入值最大长度，结合 v-model 使用 | number <br> string| 6 |
-
-
+| overlay | 自定义键盘额外的键  | array<br>string | 数组形式最多支持添加2个,超出默认取前2项 |
+| v-model:value | 是否显示遮罩	 | Boolean | true |
+| maxlength  | 输入值最大长度，结合 v-model 使用 | number <br> String| 6 |
 
 
 ## Event

src/packages/__VUE/numberkeyboard/index.scss

@@ -104,5 +104,5 @@
   }
 }
 .nut-numberkeyboard-overlay {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgba(0, 0, 0, 0) !important;
 }

src/packages/__VUE/numberkeyboard/index.taro.vue

@@ -2,6 +2,7 @@
   <nut-popup
     v-model:visible="show"
     position="bottom"
+    :overlay="overlay"
     @click-overlay="closeBoard()"
     overlay-class="nut-numberkeyboard-overlay"
   >
@@ -17,10 +18,7 @@
               'key-board-wrapper',
               {
                 'key-board-wrapper-large':
-                  item.id == 0 &&
-                  type == 'rightColumn' &&
-                  Array.isArray(customKey) &&
-                  customKey.length == 1
+                  item.id == 0 && type == 'rightColumn' && Array.isArray(customKey) && customKey.length == 1
               }
             ]"
             v-for="item of keysList"
@@ -37,9 +35,7 @@
               @touchmove="(event) => onTouchMove(item, event)"
               @touchend="onTouchEnd"
             >
-              <template v-if="item.type == 'number' || item.type == 'custom'">{{
-                item.id
-              }}</template>
+              <template v-if="item.type == 'number' || item.type == 'custom'">{{ item.id }}</template>
               <img
                 v-if="item.type == 'lock'"
                 src="https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png"
@@ -55,12 +51,8 @@
           <div class="key-board-wrapper">
             <div
               :class="['key', { active: clickKeyIndex == 'delete' }]"
-              @touchstart="
-                (event) => onTouchstart({ id: 'delete', type: 'delete' }, event)
-              "
-              @touchmove="
-                (event) => onTouchMove({ id: 'delete', type: 'delete' }, event)
-              "
+              @touchstart="(event) => onTouchstart({ id: 'delete', type: 'delete' }, event)"
+              @touchmove="(event) => onTouchMove({ id: 'delete', type: 'delete' }, event)"
               @touchend="onTouchEnd"
             >
               <img
@@ -68,20 +60,8 @@
               />
             </div>
           </div>
-          <div
-            class="key-board-wrapper"
-            @click="closeBoard()"
-            v-if="title == ''"
-          >
-            <div
-              :class="[
-                'key',
-                'finish',
-                { activeFinsh: clickKeyIndex == 'finish' }
-              ]"
-            >
-              完成
-            </div>
+          <div class="key-board-wrapper" @click="closeBoard()" v-if="title == ''">
+            <div :class="['key', 'finish', { activeFinsh: clickKeyIndex == 'finish' }]"> 完成 </div>
           </div>
         </div>
       </div>
@@ -90,16 +70,7 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  onMounted,
-  provide,
-  reactive,
-  nextTick,
-  ref,
-  watch,
-  Ref
-} from 'vue';
+import { computed, onMounted, provide, reactive, nextTick, ref, watch, Ref } from 'vue';
 import { createComponent } from '../../utils/create';
 const { create } = createComponent('numberkeyboard');
 export default create({
@@ -131,6 +102,10 @@ export default create({
     randomKeys: {
       type: Boolean,
       default: false
+    },
+    overlay: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['input', 'delete', 'close', 'update:value'],
@@ -168,16 +143,9 @@ export default create({
       }
       if (customKeys.length === 1) {
         if (props.title) {
-          keys.push(
-            { id: customKeys[0], type: 'custom' },
-            { id: 0, type: 'number' },
-            { id: 'delete', type: 'delete' }
-          );
+          keys.push({ id: customKeys[0], type: 'custom' }, { id: 0, type: 'number' }, { id: 'delete', type: 'delete' });
         } else {
-          keys.push(
-            { id: 0, type: 'number' },
-            { id: customKeys[0], type: 'custom' }
-          );
+          keys.push({ id: 0, type: 'number' }, { id: customKeys[0], type: 'custom' });
         }
       } else if (customKeys.length === 2) {
         keys.push(

src/packages/__VUE/numberkeyboard/index.vue

@@ -2,6 +2,7 @@
   <nut-popup
     v-model:visible="show"
     position="bottom"
+    :overlay="overlay"
     @click-overlay="closeBoard()"
     overlay-class="nut-numberkeyboard-overlay"
   >
@@ -17,10 +18,7 @@
               'key-board-wrapper',
               {
                 'key-board-wrapper-large':
-                  item.id == 0 &&
-                  type == 'rightColumn' &&
-                  Array.isArray(customKey) &&
-                  customKey.length == 1
+                  item.id == 0 && type == 'rightColumn' && Array.isArray(customKey) && customKey.length == 1
               }
             ]"
             v-for="item of keysList"
@@ -37,9 +35,7 @@
               @touchmove="(event) => onTouchMove(item, event)"
               @touchend="onTouchEnd"
             >
-              <template v-if="item.type == 'number' || item.type == 'custom'">{{
-                item.id
-              }}</template>
+              <template v-if="item.type == 'number' || item.type == 'custom'">{{ item.id }}</template>
               <img
                 v-if="item.type == 'lock'"
                 src="https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png"
@@ -55,12 +51,8 @@
           <div class="key-board-wrapper">
             <div
               :class="['key', { active: clickKeyIndex == 'delete' }]"
-              @touchstart="
-                (event) => onTouchstart({ id: 'delete', type: 'delete' }, event)
-              "
-              @touchmove="
-                (event) => onTouchMove({ id: 'delete', type: 'delete' }, event)
-              "
+              @touchstart="(event) => onTouchstart({ id: 'delete', type: 'delete' }, event)"
+              @touchmove="(event) => onTouchMove({ id: 'delete', type: 'delete' }, event)"
               @touchend="onTouchEnd"
             >
               <img
@@ -68,20 +60,8 @@
               />
             </div>
           </div>
-          <div
-            class="key-board-wrapper"
-            @click="closeBoard()"
-            v-if="title == ''"
-          >
-            <div
-              :class="[
-                'key',
-                'finish',
-                { activeFinsh: clickKeyIndex == 'finish' }
-              ]"
-            >
-              完成
-            </div>
+          <div class="key-board-wrapper" @click="closeBoard()" v-if="title == ''">
+            <div :class="['key', 'finish', { activeFinsh: clickKeyIndex == 'finish' }]"> 完成 </div>
           </div>
         </div>
       </div>
@@ -90,16 +70,7 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  onMounted,
-  provide,
-  reactive,
-  nextTick,
-  ref,
-  watch,
-  Ref
-} from 'vue';
+import { computed, onMounted, provide, reactive, nextTick, ref, watch, Ref } from 'vue';
 import { createComponent } from '../../utils/create';
 const { create } = createComponent('numberkeyboard');
 export default create({
@@ -131,10 +102,16 @@ export default create({
     randomKeys: {
       type: Boolean,
       default: false
+    },
+    overlay: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['input', 'delete', 'close', 'update:value'],
   setup(props, { emit }) {
+    console.log(props.overlay);
+
     const clickKeyIndex = ref(undefined);
     const show = ref(props.visible);
     const root = ref<HTMLElement>();
@@ -168,16 +145,9 @@ export default create({
       }
       if (customKeys.length === 1) {
         if (props.title) {
-          keys.push(
-            { id: customKeys[0], type: 'custom' },
-            { id: 0, type: 'number' },
-            { id: 'delete', type: 'delete' }
-          );
+          keys.push({ id: customKeys[0], type: 'custom' }, { id: 0, type: 'number' }, { id: 'delete', type: 'delete' });
         } else {
-          keys.push(
-            { id: 0, type: 'number' },
-            { id: customKeys[0], type: 'custom' }
-          );
+          keys.push({ id: 0, type: 'number' }, { id: customKeys[0], type: 'custom' });
         }
       } else if (customKeys.length === 2) {
         keys.push(