nutui-uniapp

Appearance

NumberKeyboard 数字键盘 ​

介绍 ​

虚拟数字键盘，用于输入支付密码的场景。

默认键盘 ​

在线调试请将浏览器变为手机模式

html
<template>
    <nut-cell :isLink="true" @click="showKeyBoard"  title="默认键盘"></nut-cell>
    <nut-number-keyboard v-model:visible="visible" @input="input" @delete="onDelete" @close="close"> </nut-number-keyboard>
</template>
<script>
import { ref } from 'vue';
export default{
  setup() {
    const visible = ref(false);
    function showKeyBoard() {
      visible.value = true;
    }
    function input(number) {
      console.log(`输入：${number}`);
    }
    function onDelete() {
      console.log('删除');
    }
    function close() {
      visible.value = false;
    }
    return {
      visible,
      input,
      showKeyBoard,
      close,
      onDelete

    };
  }
  }
</script>

带右侧栏键盘 ​

html
<template>
    <nut-cell :isLink="true" @click="showKeyBoard"  title="带右侧栏键盘"></nut-cell>
     <nut-number-keyboard
      type="rightColumn"
      v-model:visible="visible"
      :custom-key="customKey"
      confirm-text="支付"
      @input="input"
      @close="close"
    >
    </nut-number-keyboard>
</template>
<script>
import { ref,reactive } from 'vue';
export default{
  setup() {
    const visible = ref(false);
    const customKey = reactive(['.']);
    function showKeyBoard() {
      visible.value = true;
    }
    function input(number) {
      console.log(`输入：${number}`);
    }
    function close() {
      visible.value = false;
    }
    return {
      visible,
    customKey,
      input,
      showKeyBoard,
      close,

    };
  }
  }
</script>

随机数键盘 ​

html
<template>
    <nut-cell :isLink="true" @click="showKeyBoard"  title="随机数键盘"></nut-cell>
    <nut-number-keyboard
      type="rightColumn"
      v-model:visible="visible"
      :randomKeys="true"
      :custom-key="customKey"
      @input="input"
      @close="close"
    >
    </nut-number-keyboard>
</template>
<script>
import { ref,reactive } from 'vue';
export default{
  setup() {
    const visible = ref(false);
    const customKey = reactive(['.']);
    function showKeyBoard() {
      visible.value = true;
    }
    function input(number) {
      console.log(`输入：${number}`);
    }
    function close() {
      visible.value = false;
    }
    return {
      visible,
    customKey,
      input,
      showKeyBoard,
      close,
    };
  }
  }
</script>

带标题栏键盘 ​

html
<template>
     <nut-cell :isLink="true" @click="showKeyBoard(4)" title="带标题栏键盘"></nut-cell>
    <nut-number-keyboard
      title="默认键盘"
      v-model:visible="visible"
      :custom-key="customKey"
      @input="input"
      @close="close"
    >
    </nut-number-keyboard>
</template>
<script>
import { ref,reactive } from 'vue';
export default{
  setup() {
    const visible = ref(false);
    const customKey = reactive(['.']);
    function showKeyBoard() {
      visible.value = true;
    }
    function input(number) {
      console.log(`输入：${number}`);
    }
    function close() {
      visible.value = false;
    }
    return {
      visible,
      customKey,
      input,
      showKeyBoard,
      close,
    };
  }
  }
</script>

身份证键盘 ​

html
<template>
     <nut-cell :isLink="true" @click="showKeyBoard(4)"  title="身份证键盘"></nut-cell>
    <nut-number-keyboard
      v-model:visible="visible"
      :custom-key="customKey"
      @input="input"
      @close="close"
    >
    </nut-number-keyboard>
</template>
<script>
import { ref,reactive } from 'vue';
export default{
  setup() {
    const visible = ref(false);
    const customKey = reactive(['X']);
    function showKeyBoard() {
      visible.value = true;
    }
    function input(number) {
      console.log(`输入：${number}`);
    }
    function close() {
      visible.value = false;
    }
    return {
      visible,
      customKey,
      input,
      showKeyBoard,
      close,
    };
  }
  }
</script>

双向绑定 ​

html
<template>
      <nut-cell
      :isLink="true"
      desc-text-align="left"
      @click="showKeyBoard"
      :desc="value"
      title="双向绑定："
    ></nut-cell>
     <nut-number-keyboard
       v-model:visible="visible"
       v-model:value="value"
       maxlength="6"
       @close="close">
    </nut-number-keyboard>
</template>
<script>
import { ref,reactive } from 'vue';
export default{
  setup() {
    const visible = ref(false);
     const value = ref('');
    const customKey = reactive(['.']);
    function showKeyBoard() {
      visible.value = true;
    }
    function close() {
      visible.value = false;
    }
    return {
      visible,
      customKey,
      value,
      showKeyBoard,
      close,
    };
  }
  }
</script>

API ​

Props ​

参数说明类型默认值
v-model:visible是否显示键盘booleanfalse
v-model当前输入值string-
title键盘标题string-
type键盘模式stringdefault：默认样式
rightColumn：带右侧栏
random-keys随机数booleanfalse
custom-key自定义键盘额外的键string []数组形式最多支持添加2个,超出默认取前2项
overlay是否显示遮罩booleanfalse
maxlength输入值最大长度，结合 v-model 使用number | string6
confirm-text自定义完成按钮文字，如"支付"，"下一步"，"提交"等string完成
pop-class自定义弹框类名string-

Events ​

事件名说明回调参数
input点击按键时触发按键内容
delete点击删除键时触发-
close点击关闭按钮或非键盘区域时触发-
confirm v1.7.9点击确认按钮-

主题定制 ​

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称默认值
--nut-numberkeyboard-width100%
--nut-numberkeyboard-padding0
--nut-numberkeyboard-background-color#f2f3f5
--nut-numberkeyboard-header-height34px
--nut-numberkeyboard-header-padding6px 0 0 0
--nut-numberkeyboard-header-color#646566
--nut-numberkeyboard-header-font-size16px
--nut-numberkeyboard-header-close-padding0 16px
--nut-numberkeyboard-header-close-color#576b95
--nut-numberkeyboard-header-close-font-size14px
--nut-numberkeyboard-header-close-background-colortransparent
--nut-numberkeyboard-key-background-color#fff
--nut-numberkeyboard-key-active-background-color#ebedf0
--nut-numberkeyboard-key-height48px
--nut-numberkeyboard-key-line-height1.5
--nut-numberkeyboard-key-border-radius8px
--nut-numberkeyboard-key-font-size28px
--nut-numberkeyboard-key-font-size-color#333
--nut-numberkeyboard-key-finish-font-size16px
--nut-numberkeyboard-key-finish-font-size-color#fff
--nut-numberkeyboard-key-finish-background-color#1989fa
--nut-numberkeyboard-key-activeFinsh-background-color#0570db

MIT Licensed

版权所有 © 2023 年-至今 yang1206 贡献者