ソースを参照

fix(numberkeyboard): add demo

Drjingfubo 3 年 前
コミット
fedbcccc3c

+ 1 - 7
src/packages/__VUE/numberkeyboard/demo.vue

@@ -74,13 +74,7 @@
       :showIcon="true"
       :title="translate('bindValue')"
     ></nut-cell>
-    <nut-number-keyboard
-      v-model:visible="visible5"
-      v-model:value="value"
-      maxlength="6"
-      @blur="onBlur(5)"
-      @close="close(5)"
-    >
+    <nut-number-keyboard v-model:visible="visible5" v-model="value" maxlength="6" @blur="onBlur(5)" @close="close(5)">
     </nut-number-keyboard>
   </div>
 </template>

+ 0 - 1
src/packages/__VUE/numberkeyboard/doc.en-US.md

@@ -290,7 +290,6 @@ export default{
 | type | Keyboard type  can be set to `rightColumn`   | String | `default` |
 | random-keys | Whether to shuffle the order of keys  | Boolean | false |
 | custom-key | Content of bottom left key  | String [] | Array form supports adding up to two |
-| overlay | Whether to show the mask  | Boolean| true |
 | maxlength  | Value maxlength,Use with v-model | Number | String| 6 |
 | confirm-text  | Custom done button text,Such as "pay", "next", "submit" | String | done |
 | teleport    | Specify the mount node  | String         | `"body"`      |

+ 1 - 2
src/packages/__VUE/numberkeyboard/doc.md

@@ -247,7 +247,7 @@ export default{
     ></nut-cell>
      <nut-number-keyboard 
        v-model:visible="visible" 
-       v-model:value="value" 
+       v-model="value" 
        maxlength="6" 
        @close="close">
     </nut-number-keyboard>
@@ -290,7 +290,6 @@ export default{
 | type | 键盘模式  | String | `default`:默认样式<br>`rightColumn`:带右侧栏 |
 | random-keys | 随机数  | Boolean | false |
 | custom-key | 自定义键盘额外的键  | String [] | 数组形式最多支持添加2个,超出默认取前2项 |
-| overlay | 是否显示遮罩  | Boolean| true |
 | maxlength  | 输入值最大长度,结合 v-model 使用 | Number | String| 6 |
 | confirm-text  | 自定义完成按钮文字,如"支付","下一步","提交"等 | String | 完成 |
 | pop-class    | 自定义弹框类名     | String         | -             |

+ 2 - 2
src/packages/__VUE/numberkeyboard/doc.taro.md

@@ -285,12 +285,12 @@ export default{
 | 字段 | 说明 | 类型 | 默认值 |
 |----- | ----- | ----- | ----- |
 | v-model:visible | 是否显示键盘 | Boolean | false | 
+| v-model | 当前输入值		 | String | - |
 | title | 键盘标题 | String | - |
 | type | 键盘模式  | String | `default`:默认样式<br>`rightColumn`:带右侧栏 |
 | random-keys | 随机数  | Boolean | false |
 | custom-key | 自定义键盘额外的键  | String [] | 数组形式最多支持添加2个,超出默认取前2项 |
-| overlay | 是否显示遮罩  | Boolean| true |
-| v-model | 当前输入值		 | String | - |
+| overlay | 是否显示遮罩  | Boolean| false |
 | maxlength  | 输入值最大长度,结合 v-model 使用 | Number | String| 6 |
 | confirm-text  | 自定义完成按钮文字,如"支付","下一步","提交"等 | String | 完成 |
 | pop-class    | 自定义弹框类名     | String         | -             |

+ 3 - 0
src/packages/__VUE/numberkeyboard/index.scss

@@ -113,3 +113,6 @@
     height: 24px;
   }
 }
+.nut-number-keyboard-overlay {
+  background-color: rgba(0, 0, 0, 0) !important;
+}

+ 9 - 2
src/packages/__VUE/numberkeyboard/index.taro.vue

@@ -1,5 +1,12 @@
 <template>
-  <nut-popup v-model:visible="show" position="bottom" :popClass="popClass" :overlay="false">
+  <nut-popup
+    v-model:visible="show"
+    position="bottom"
+    :popClass="popClass"
+    :overlay="overlay"
+    @click-overlay="closeBoard()"
+    overlay-class="nut-number-keyboard-overlay"
+  >
     <div class="nut-number-keyboard" ref="root">
       <div class="nut-number-keyboard__header" v-if="title">
         <h3 class="nut-number-keyboard__title">{{ title }}</h3>
@@ -115,7 +122,7 @@ export default create({
     },
     overlay: {
       type: Boolean,
-      default: true
+      default: false
     },
     popClass: {
       type: String,

+ 11 - 10
src/sites/mobile-taro/vue/src/dentry/pages/numberkeyboard/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="demo">
     <nut-cell :isLink="true" @click="showKeyBoard(1)" :showIcon="true" title="默认键盘"></nut-cell>
-    <nut-number-keyboard v-model:visible="visible1" @input="input" @delete="onDelete" @close="close(1)">
+    <nut-number-keyboard overlay v-model:visible="visible1" @input="input" @delete="onDelete" @close="close(1)">
     </nut-number-keyboard>
     <nut-cell :isLink="true" @click="showKeyBoard(2)" :showIcon="true" title="带右侧栏键盘"></nut-cell>
     <nut-number-keyboard
       type="rightColumn"
+      overlay
       v-model:visible="visible2"
       :custom-key="customKey1"
       @input="input"
@@ -15,6 +16,7 @@
     <nut-cell :isLink="true" @click="showKeyBoard(3)" :showIcon="true" title="随机数键盘"></nut-cell>
     <nut-number-keyboard
       type="rightColumn"
+      overlay
       v-model:visible="visible3"
       :randomKeys="true"
       :custom-key="customKey1"
@@ -26,6 +28,7 @@
     <nut-cell :isLink="true" @click="showKeyBoard(4)" :showIcon="true" title="带标题栏键盘"></nut-cell>
     <nut-number-keyboard
       title="默认键盘"
+      overlay
       v-model:visible="visible4"
       :custom-key="customKey2"
       @input="input"
@@ -33,20 +36,16 @@
     >
     </nut-number-keyboard>
     <nut-cell :isLink="true" @click="showKeyBoard(6)" :showIcon="true" title="身份证键盘"></nut-cell>
-    <nut-number-keyboard v-model:visible="visible6" :custom-key="customKey3" @input="input" @close="close(6)">
+    <nut-number-keyboard overlay v-model:visible="visible6" :custom-key="customKey3" @input="input" @close="close(6)">
     </nut-number-keyboard>
-    <div class="boardValue" @click="showKeyBoard(5)">
-      <div class="value">
-        <nut-input v-model="value" readonly label="双向绑定:" />
-      </div>
-    </div>
-    <nut-number-keyboard v-model:visible="visible5" v-model:value="value" maxlength="6" @close="close(5)">
+    <nut-cell :isLink="true" :desc="value" @click="showKeyBoard(5)" :showIcon="true" title="双向绑定"></nut-cell>
+    <nut-number-keyboard overlay v-model:visible="visible5" v-model="value" maxlength="6" @close="close(5)">
     </nut-number-keyboard>
   </div>
 </template>
 
 <script lang="ts">
-import { ref, getCurrentInstance, reactive } from 'vue';
+import { ref, reactive } from 'vue';
 export default {
   props: {},
   setup() {
@@ -61,7 +60,9 @@ export default {
     const customKey2 = reactive(['.', 'x']);
     const customKey3 = reactive(['X']);
     const visibleArr = [visible1, visible2, visible3, visible4, visible5, visible6];
-    function input(number: any) {}
+    function input(number: any) {
+      console.log(number);
+    }
     function showKeyBoard(index: number) {
       visibleArr[index - 1].value = true;
     }