feat: 新增numberkeyboard组件

src/config.json

@@ -716,6 +716,17 @@
           "show": true,
           "desc": "数字滚动组件，动态变化展示",
           "author": "Ymm0008"
+        },
+        {
+          "version": "3.0.0",
+          "name": "NumberKeyboard",
+          "taro": true,
+          "sort": 13,
+          "cName": "数字键盘",
+          "type": "component",
+          "show": true,
+          "desc": "虚拟数字键盘",
+          "author": "Drjingfubo"
         }
       ]
     },

src/packages/__VUE/actionsheet/doc.md

@@ -47,7 +47,7 @@ app.use(ActionSheet);
 ```
 ## 展示描述信息
 ```html
-<div @click.native="switchActionSheet">
+<div @click="switchActionSheet">
    <span><label>展示取消按钮</label></span>
     <div class="selected-option" v-html="state.val"></div>
 </div>
@@ -62,7 +62,7 @@ app.use(ActionSheet);
 
 ## 选项状态
 ```html
-<div @click.native="switchActionSheet">
+<div @click="switchActionSheet">
     <span class="title"><label>性别</label></span>
     <span class="selected-option" v-html="sex"></span>
 </div>

src/packages/__VUE/numberkeyboard/demo.vue

@@ -0,0 +1,127 @@
+<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-numberkeyboard>
+    <nut-cell
+      :isLink="true"
+      @click="showKeyBoard(2)"
+      :showIcon="true"
+      title="带右侧栏键盘"
+    ></nut-cell>
+    <nut-numberkeyboard
+      type="rightColumn"
+      v-model:visible="visible2"
+      :custom-key="customKey1"
+      @input="input"
+      @close="close(2)"
+    >
+    </nut-numberkeyboard>
+    <nut-cell
+      :isLink="true"
+      @click="showKeyBoard(3)"
+      :showIcon="true"
+      title="随机数键盘"
+    ></nut-cell>
+    <nut-numberkeyboard
+      type="rightColumn"
+      v-model:visible="visible3"
+      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-numberkeyboard
+      title="默认键盘"
+      v-model:visible="visible4"
+      :custom-key="customKey2"
+      @input="input"
+      @close="close(4)"
+    >
+    </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>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, getCurrentInstance, reactive } from 'vue';
+import { createComponent } from '../../utils/create';
+const { createDemo } = createComponent('numberkeyboard');
+export default createDemo({
+  props: {},
+  setup() {
+    let { proxy } = getCurrentInstance() as any;
+    const visible1 = ref(false);
+    const visible2 = ref(false);
+    const visible3 = ref(false);
+    const visible4 = ref(false);
+    const visible5 = ref(false);
+    const value = ref('');
+    const customKey1 = reactive(['.']);
+    const customKey2 = reactive(['.']);
+    const visibleArr = [visible1, visible2, visible3, visible4, visible5];
+    function input(number: any) {
+      proxy.$toast.text(`输入：${number}`);
+    }
+    function showKeyBoard(index: number) {
+      visibleArr[index - 1].value = true;
+    }
+    function onDelete() {
+      proxy.$toast.text('删除');
+    }
+    function close(index: number) {
+      visibleArr[index - 1].value = false;
+    }
+
+    return {
+      input,
+      onDelete,
+      close,
+      showKeyBoard,
+      customKey1,
+      customKey2,
+      visible1,
+      visible2,
+      visible3,
+      visible4,
+      visible5,
+      value
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.nut-button {
+  margin-right: 10px;
+}
+</style>

src/packages/__VUE/numberkeyboard/doc.md

@@ -0,0 +1,71 @@
+# NumberKeyboard 数字键盘
+
+### 介绍
+
+虚拟数字键盘，用于输入支付密码的场景。
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+//vue
+import { NumberKeyboard } from '@nutui/nutui';
+//taro
+import { NumberKeyboard } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(NumberKeyboard);
+
+```
+
+## 代码示例
+
+### 基础用法 默认键盘
+
+```html
+ <nut-numberkeyboard v-model:visible="visible" @input="input" @delete="onDelete" @close="close()"> </nut-numberkeyboard>
+```
+### 带右侧栏键盘
+
+```html
+<nut-numberkeyboard type="rightColumn" v-model:visible="visible" :custom-key="customKey1" @input="input" @close="close()"> </nut-numberkeyboard>
+```
+### 随机数键盘
+
+```html
+<nut-numberkeyboard type="rightColumn" v-model:visible="visible" randomKeys="true" :custom-key="customKey1" @input="input" @close="close(）"> </nut-numberkeyboard>
+```
+### 带标题栏键盘
+
+```html
+<nut-numberkeyboard title="默认键盘" v-model:visible="visible" :custom-key="customKey2" @input="input" @close="close()"> </nut-numberkeyboard>
+```
+
+### 双向绑定：
+
+```html
+ <nut-numberkeyboard v-model:visible="visible" v-model:value="value" maxlength="6" @close="close()"> </nut-numberkeyboard>
+```
+
+## Prop
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| visible | 是否显示键盘 | boolean | false
+| title | 键盘标题 | string | - |
+| type | 键盘模式  | string | `default`：默认样式<br>`rightColumn`：带右侧栏 |
+| custom-key | 自定义键盘额外的键  | array<br>string | 数组形式最多支持添加2个,超出默认取前2项 |
+| v-model | 当前输入值 | string | - |
+| maxlength  | 输入值最大长度，结合 v-model 使用 | number <br> string| 6 |
+
+
+
+
+## Event
+
+| 字段 | 说明 | 回调参数
+|----- | ----- | -----
+| input  | 点击按键时触发                 | 按键内容 |
+| delete | 点击删除键时触发               | -             |
+| close  | 点击关闭按钮或非键盘区域时触发  | -             |
+

src/packages/__VUE/numberkeyboard/index.scss

@@ -0,0 +1,108 @@
+.nut-numberkeyboard {
+  width: 100%;
+  padding-bottom: 22px;
+  background-color: #f2f3f5;
+  user-select: none;
+
+  .number-board-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+    height: 34px;
+    padding-top: 6px;
+    color: #646566;
+    font-size: 16px;
+
+    .tit {
+      display: inline-block;
+    }
+
+    .keyboard-close {
+      position: absolute;
+      display: block;
+      right: 0;
+      padding: 0 16px;
+      color: #576b95;
+      font-size: 14px;
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+    }
+  }
+
+  .number-board-body {
+    display: flex;
+    padding: 6px 0 0 6px;
+
+    .number-board {
+      display: flex;
+      flex: 3;
+      flex-wrap: wrap;
+    }
+
+    .key-board-wrapper {
+      position: relative;
+      flex: 1;
+      flex-basis: 33%;
+      box-sizing: border-box;
+      padding: 0 6px 6px 0;
+
+      .key {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 48px;
+        font-size: 28px;
+        line-height: 1.5;
+        background-color: #fff;
+        border-radius: 8px;
+        cursor: pointer;
+      }
+
+      .active {
+        background-color: #ebedf0;
+      }
+
+      img {
+        width: 30px;
+        height: 24px;
+      }
+    }
+
+    .key-board-wrapper-large {
+      flex-basis: 66%;
+    }
+
+    .number-board-sidebar {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+
+      .key-board-wrapper {
+        .key {
+          position: absolute;
+          top: 0;
+          right: 6px;
+          bottom: 6px;
+          left: 0;
+          height: auto;
+        }
+
+        .finish {
+          font-size: 16px;
+          color: #fff;
+          background-color: #1989fa;
+        }
+
+        .activeFinsh {
+          background-color: #0570db;
+        }
+      }
+    }
+  }
+}
+.nut-numberkeyboard-overlay {
+  background-color: rgba(0, 0, 0, 0);
+}

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

@@ -0,0 +1,257 @@
+<template>
+  <nut-popup
+    v-model:visible="show"
+    position="bottom"
+    @click-overlay="closeBoard()"
+    overlay-class="nut-numberkeyboard-overlay"
+  >
+    <div class="nut-numberkeyboard" ref="root">
+      <div class="number-board-header" v-if="title">
+        <h3 class="tit">{{ title }}</h3>
+        <span class="keyboard-close" @click="closeBoard()">完成</span>
+      </div>
+      <div class="number-board-body">
+        <div class="number-board">
+          <div
+            :class="[
+              'key-board-wrapper',
+              {
+                'key-board-wrapper-large':
+                  item.id == 0 &&
+                  type == 'rightColumn' &&
+                  Array.isArray(customKey) &&
+                  customKey.length == 1
+              }
+            ]"
+            v-for="item of keysList"
+            :key="'key' + item.id"
+          >
+            <div
+              :class="[
+                'key',
+                { active: item.id == clickKeyIndex },
+                { lock: item.type == 'lock' },
+                { delete: item.type == 'delete' }
+              ]"
+              @touchstart="(event) => onTouchstart(item, event)"
+              @touchmove="(event) => onTouchMove(item, event)"
+              @touchend="onTouchEnd"
+            >
+              <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"
+              />
+              <img
+                v-if="item.type == 'delete'"
+                src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="number-board-sidebar" v-if="type == 'rightColumn'">
+          <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)
+              "
+              @touchend="onTouchEnd"
+            >
+              <img
+                src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png"
+              />
+            </div>
+          </div>
+          <div
+            class="key-board-wrapper"
+            @click="closeBoard()"
+            v-if="title == ''"
+          >
+            <div
+              :class="[
+                'key',
+                'finish',
+                { activeFinsh: clickKeyIndex == 'finish' }
+              ]"
+            >
+              完成
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nut-popup>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  onMounted,
+  provide,
+  reactive,
+  nextTick,
+  ref,
+  watch,
+  Ref
+} from 'vue';
+import { createComponent } from '../../utils/create';
+const { create } = createComponent('numberkeyboard');
+export default create({
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'default'
+    },
+    customKey: {
+      type: Array,
+      default: () => []
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    maxlength: {
+      type: [Number, String],
+      default: 6
+    },
+    randomKeys: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['input', 'delete', 'close', 'update:value'],
+  setup(props, { emit }) {
+    const clickKeyIndex = ref(undefined);
+    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' }
+      ];
+    }
+
+    function getBasicKeys() {
+      const keys: any = [];
+      for (let i = 1; i <= 9; i++) {
+        keys.push({ id: i, type: 'number' });
+      }
+      if (props.randomKeys) {
+        return keys.sort(() => (Math.random() > 0.5 ? 1 : -1));
+      }
+
+      return keys;
+    }
+
+    function genCustomKeys() {
+      const keys = getBasicKeys();
+      const { customKey } = props;
+      let customKeys = Array.isArray(customKey) ? customKey : [customKey];
+      if (customKeys.length > 2) {
+        customKeys = [customKeys[0], customKeys[1]];
+      }
+      if (customKeys.length === 1) {
+        if (props.title) {
+          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' }
+          );
+        }
+      } else if (customKeys.length === 2) {
+        keys.push(
+          { id: customKeys[0], type: 'custom' },
+          { id: 0, type: 'number' },
+          { id: customKeys[1], type: 'custom' }
+        );
+        if (props.title) {
+          keys.push({ id: 'delete', type: 'delete' });
+        }
+      } else {
+        keys.push({ id: 0, type: 'number' });
+      }
+      return keys;
+    }
+    const keysList = computed(() => {
+      if (props.type == 'rightColumn' || props.title != '') {
+        return genCustomKeys();
+      }
+      return defaultKey();
+    });
+    watch(
+      () => props.visible,
+      (value) => {
+        show.value = value;
+      }
+    );
+
+    function onTouchstart(item: any, event: any) {
+      event.stopPropagation();
+      clickKeyIndex.value = item.id;
+      if (item.type == 'number' || item.type == 'custom') {
+        emit('input', item.id);
+        if (props.value.length < props.maxlength) {
+          emit('update:value', props.value + item.id);
+        }
+      }
+      if (item.type == 'lock') {
+        closeBoard();
+      }
+      if (item.type == 'delete') {
+        emit('delete');
+        emit('update:value', props.value.slice(0, props.value.length - 1));
+      }
+    }
+    function onTouchMove(id: any, event: any) {
+      event.stopPropagation();
+    }
+    function onTouchEnd() {
+      clickKeyIndex.value = undefined;
+    }
+
+    function closeBoard() {
+      emit('close');
+    }
+
+    onMounted(() => {});
+    return {
+      clickKeyIndex,
+      defaultKey,
+      closeBoard,
+      onTouchEnd,
+      onTouchMove,
+      onTouchstart,
+      keysList,
+      genCustomKeys,
+      getBasicKeys,
+      root,
+      show
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>

src/packages/__VUE/numberkeyboard/index.vue

@@ -0,0 +1,257 @@
+<template>
+  <nut-popup
+    v-model:visible="show"
+    position="bottom"
+    @click-overlay="closeBoard()"
+    overlay-class="nut-numberkeyboard-overlay"
+  >
+    <div class="nut-numberkeyboard" ref="root">
+      <div class="number-board-header" v-if="title">
+        <h3 class="tit">{{ title }}</h3>
+        <span class="keyboard-close" @click="closeBoard()">完成</span>
+      </div>
+      <div class="number-board-body">
+        <div class="number-board">
+          <div
+            :class="[
+              'key-board-wrapper',
+              {
+                'key-board-wrapper-large':
+                  item.id == 0 &&
+                  type == 'rightColumn' &&
+                  Array.isArray(customKey) &&
+                  customKey.length == 1
+              }
+            ]"
+            v-for="item of keysList"
+            :key="'key' + item.id"
+          >
+            <div
+              :class="[
+                'key',
+                { active: item.id == clickKeyIndex },
+                { lock: item.type == 'lock' },
+                { delete: item.type == 'delete' }
+              ]"
+              @touchstart="(event) => onTouchstart(item, event)"
+              @touchmove="(event) => onTouchMove(item, event)"
+              @touchend="onTouchEnd"
+            >
+              <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"
+              />
+              <img
+                v-if="item.type == 'delete'"
+                src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="number-board-sidebar" v-if="type == 'rightColumn'">
+          <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)
+              "
+              @touchend="onTouchEnd"
+            >
+              <img
+                src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png"
+              />
+            </div>
+          </div>
+          <div
+            class="key-board-wrapper"
+            @click="closeBoard()"
+            v-if="title == ''"
+          >
+            <div
+              :class="[
+                'key',
+                'finish',
+                { activeFinsh: clickKeyIndex == 'finish' }
+              ]"
+            >
+              完成
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nut-popup>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  onMounted,
+  provide,
+  reactive,
+  nextTick,
+  ref,
+  watch,
+  Ref
+} from 'vue';
+import { createComponent } from '../../utils/create';
+const { create } = createComponent('numberkeyboard');
+export default create({
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'default'
+    },
+    customKey: {
+      type: Array,
+      default: () => []
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    maxlength: {
+      type: [Number, String],
+      default: 6
+    },
+    randomKeys: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['input', 'delete', 'close', 'update:value'],
+  setup(props, { emit }) {
+    const clickKeyIndex = ref(undefined);
+    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' }
+      ];
+    }
+
+    function getBasicKeys() {
+      const keys: any = [];
+      for (let i = 1; i <= 9; i++) {
+        keys.push({ id: i, type: 'number' });
+      }
+      if (props.randomKeys) {
+        return keys.sort(() => (Math.random() > 0.5 ? 1 : -1));
+      }
+
+      return keys;
+    }
+
+    function genCustomKeys() {
+      const keys = getBasicKeys();
+      const { customKey } = props;
+      let customKeys = Array.isArray(customKey) ? customKey : [customKey];
+      if (customKeys.length > 2) {
+        customKeys = [customKeys[0], customKeys[1]];
+      }
+      if (customKeys.length === 1) {
+        if (props.title) {
+          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' }
+          );
+        }
+      } else if (customKeys.length === 2) {
+        keys.push(
+          { id: customKeys[0], type: 'custom' },
+          { id: 0, type: 'number' },
+          { id: customKeys[1], type: 'custom' }
+        );
+        if (props.title) {
+          keys.push({ id: 'delete', type: 'delete' });
+        }
+      } else {
+        keys.push({ id: 0, type: 'number' });
+      }
+      return keys;
+    }
+    const keysList = computed(() => {
+      if (props.type == 'rightColumn' || props.title != '') {
+        return genCustomKeys();
+      }
+      return defaultKey();
+    });
+    watch(
+      () => props.visible,
+      (value) => {
+        show.value = value;
+      }
+    );
+
+    function onTouchstart(item: any, event: any) {
+      event.stopPropagation();
+      clickKeyIndex.value = item.id;
+      if (item.type == 'number' || item.type == 'custom') {
+        emit('input', item.id);
+        if (props.value.length < props.maxlength) {
+          emit('update:value', props.value + item.id);
+        }
+      }
+      if (item.type == 'lock') {
+        closeBoard();
+      }
+      if (item.type == 'delete') {
+        emit('delete');
+        emit('update:value', props.value.slice(0, props.value.length - 1));
+      }
+    }
+    function onTouchMove(id: any, event: any) {
+      event.stopPropagation();
+    }
+    function onTouchEnd() {
+      clickKeyIndex.value = undefined;
+    }
+
+    function closeBoard() {
+      emit('close');
+    }
+
+    onMounted(() => {});
+    return {
+      clickKeyIndex,
+      defaultKey,
+      closeBoard,
+      onTouchEnd,
+      onTouchMove,
+      onTouchstart,
+      keysList,
+      genCustomKeys,
+      getBasicKeys,
+      root,
+      show
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>

src/sites/mobile-taro/vue/src/app.config.ts

@@ -60,7 +60,8 @@ export default {
         'pages/picker/index',
         'pages/datepicker/index',
         'pages/textarea/index',
-        'pages/countup/index'
+        'pages/countup/index',
+        'pages/numberkeyboard/index'
       ]
     },
     {

src/sites/mobile-taro/vue/src/dentry/pages/numberkeyboard/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'NumberKeyboard'
+};

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

@@ -0,0 +1,120 @@
+<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-numberkeyboard>
+    <nut-cell
+      :isLink="true"
+      @click="showKeyBoard(2)"
+      :showIcon="true"
+      title="带右侧栏键盘"
+    ></nut-cell>
+    <nut-numberkeyboard
+      type="rightColumn"
+      v-model:visible="visible2"
+      :custom-key="customKey1"
+      @input="input"
+      @close="close(2)"
+    >
+    </nut-numberkeyboard>
+    <nut-cell
+      :isLink="true"
+      @click="showKeyBoard(3)"
+      :showIcon="true"
+      title="随机数键盘"
+    ></nut-cell>
+    <nut-numberkeyboard
+      type="rightColumn"
+      v-model:visible="visible3"
+      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-numberkeyboard
+      title="默认键盘"
+      v-model:visible="visible4"
+      :custom-key="customKey2"
+      @input="input"
+      @close="close(4)"
+    >
+    </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>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, getCurrentInstance, reactive } from 'vue';
+export default {
+  props: {},
+  setup() {
+    const visible1 = ref(false);
+    const visible2 = ref(false);
+    const visible3 = ref(false);
+    const visible4 = ref(false);
+    const visible5 = ref(false);
+    const value = ref('');
+    const customKey1 = reactive(['.']);
+    const customKey2 = reactive(['.']);
+    const visibleArr = [visible1, visible2, visible3, visible4, visible5];
+    function input(number: any) {}
+    function showKeyBoard(index: number) {
+      visibleArr[index - 1].value = true;
+    }
+    function onDelete() {}
+    function close(index: number) {
+      visibleArr[index - 1].value = false;
+    }
+
+    return {
+      input,
+      onDelete,
+      close,
+      showKeyBoard,
+      customKey1,
+      customKey2,
+      visible1,
+      visible2,
+      visible3,
+      visible4,
+      visible5,
+      value
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.nut-button {
+  margin-right: 10px;
+}
+</style>

src/sites/mobile-taro/vue/src/feedback/pages/circleprogress/index.config.ts

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: 'Backtop'
+  navigationBarTitleText: 'CricleProgress'
 };