Rainui

Appearance

r-number-keyboard ​

r-number-keyboard虚拟数字键盘，可以配合自定义的输入框组件使用。

示例 ​

vue
<template>
  <r-config-provider :themeName="themeName">
    <page-header title="数字键盘"></page-header>

    <view style="padding-top: 20px">
      <r-cell-group inset>
        <r-cell title="弹窗默认键盘" @click="open({})" />
        <r-cell
          title="弹出带右侧栏的键盘"
          @click="
            open({
              theme: 'custom',
              extraKey: '.',
              closeButtonText: '完成',
            })
          "
        />
        <r-cell
          title="弹出身份证号键盘"
          @click="
            open({
              extraKey: 'X',
              closeButtonText: '完成',
            })
          "
        />
        <r-cell
          title="弹出带标题的键盘"
          @click="
            open({
              title: '键盘标题',
              extraKey: '.',
              closeButtonText: '完成',
            })
          "
        />
        <r-cell
          title="弹出配置多个按键的键盘"
          @click="
            open({
              theme: 'custom',
              extraKey: ['00', '.'],
              closeButtonText: '完成',
            })
          "
        />
        <r-cell
          title="弹出配置随机数字的键盘"
          @click="
            open({
              randomKeyOrder: true,
            })
          "
        />
        <r-cell title="双向绑定" :value="value" />
      </r-cell-group>
    </view>
  </r-config-provider>
  <r-number-keyboard
    v-model:show="show"
    :closeButtonText="item.closeButtonText"
    :theme="item.theme || 'default'"
    :extra-key="item.extraKey"
    :close-button-text="item.closeButtonText"
    :title="item.title"
    :random-key-order="item.randomKeyOrder"
    v-model:value="value"
  ></r-number-keyboard>
</template>

<script setup>
import useTheme from "@/hooks/useTheme";
import { ref } from "vue";
const { themeName } = useTheme();
const onClickLeft = () => {
  uni.navigateBack();
};

const show = ref(false);
const item = ref({});
const value = ref("");

const open = (data = {}) => {
  show.value = true;
  item.value = data;
};
</script>

API ​

Props ​

名称说明类型默认值可选值
value当前输入值String--
show是否显示键盘Booleanfalse
title键盘标题String--
theme样式风格Stringdefaultcustom
maxlength输入值最大长度Number | StringInfinity-
zIndex键盘 z-index 层级Number | String100-
extraKey底部额外按键的内容String | Array--
closeButtonText关闭按钮文字，空则不展示String--
deleteButtonText删除按钮文字，空则展示删除图标String--
closeButtonLoading是否将关闭按钮设置为加载中状态，仅在 theme="custom" 时有效Booleanfalsetrue
showDeleteKey是否展示删除图标Booleantruefalse
blurOnClose是否在点击关闭按钮时触发 blur 事件Booleantruefalse
hideOnClickOutside是否在点击外部时收起键盘Booleantruefalse
safeAreaInsetBottom是否开启底部安全区适配Booleantruefalse
randomKeyOrder是否将通过随机顺序展示按键Booleanfalsetrue
themeNamer-theme主题名称Stringdefault

Slots ​

名称说明
delete自定义删除按键内容
extraKey自定义左下角按键内容
titleLeft自定义标题栏左侧内容

Events ​

名称说明回调参数
input点击按键时触发value
delete点击删除键时触发-
close点击关闭按钮时触发-
blur点击关闭按钮-
update:show显示状态变化时触发flag
update:valuevalue 变化时触发value

更多组件，请前往rainui