@wines/keyboard

KeyBoard 数字键盘

用于展现数字键盘。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "wux-keyboard",
  "usingComponents": {
    "wux-keyboard": "@wines/keyboard"
  }
}

示例

该组件主要依靠 JavaScript 主动调用，所以一般只需在 wxml 中添加一个组件，并设置 id 为 #wux-keyboard 或其他，之后在 page.js 中调用 $wuxKeyBoard(this, id) 获取匹配到的第一个组件实例对象。

<wux-keyboard id="wux-keyboard" />
<view class="page">
	<view class="page__hd">
		<view class="page__title">KeyBoard</view>
		<view class="page__desc">数字键盘</view>
	</view>
	<view class="page__bd page__bd_spacing">
		<wux-button block type="light" bind:click="open">Open KeyBoard</wux-button>
		<wux-button block type="light" bind:click="openWitdhDisorder">
			Open a disorderly KeyBoard
		</wux-button>
		<wux-button block type="light" bind:click="openWithPromiseCallback">
			Open KeyBoard with promise callback
		</wux-button>
		<wux-button block type="light" bind:click="openPlain">Plain theme</wux-button>
		<wux-button block type="light" bind:click="openTimed">Open and close</wux-button>
	</view>
</view>

import './index.less';
import { $wuxKeyBoard } from '@wines/keyboard';
import { PageCustom, PageData } from '@wines/core';

Page<PageData, PageCustom>({
  data: {},
  onLoad() {
    /** */
  },
  open() {
    $wuxKeyBoard().show({
      callback(value: string) {
        console.log(`输入的密码是：${value}`);
        return true;
      },
    });
  },
  openWitdhDisorder() {
    $wuxKeyBoard().show({
      disorder: true,
      callback(value: string) {
        console.log(`输入的密码是：${value}`);
        return false;
      },
    });
  },
  openWithPromiseCallback() {
    const http = (obj) => {
      return new Promise((resolve, reject) => {
        obj.success = (res) => resolve(res);
        obj.fail = (res) => reject(res);
        wx.request(obj);
      });
    };

    $wuxKeyBoard().show({
      closeOnReject: true,
      callback(value: string) {
        console.log(`输入的密码是：${value}`);

        void wx.showLoading({
          title: '验证支付密码',
        });

        return http({
          url: 'https://www.skyvow.cn/api/user/sign/in',
          method: 'POST',
          data: {
            username: 'admin',
            password: value,
          },
        })
          .then((res) => {
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            const data = (res as any).data;

            console.log(data);

            void wx.hideLoading();

            void wx.showToast({
              title: data.meta.message,
              duration: 3000,
            });

            if (data.meta.code !== 0) {
              return Promise.reject(data.meta.message);
            }
            return Promise.resolve();
          })
          .catch((err) => {
            void wx.hideLoading();
            return Promise.reject(err);
          });
      },
    });
  },
  openPlain() {
    const fn = (title) => {
      void wx.hideLoading();
      void wx.showToast({
        title,
        duration: 3000,
      });
    };

    $wuxKeyBoard().show({
      className: 'className',
      titleText: '安全键盘',
      cancelText: '取消',
      inputText: '输入数字密码',
      showCancel: true,
      disorder: false,
      maxlength: 4,
      closeOnReject: false,
      callback(value: string) {
        console.log(`输入的密码是：${value}`);
        void wx.showLoading({
          title: '验证支付密码',
        });

        return new Promise((resolve, reject) => {
          setTimeout(
            () =>
              Math.ceil(Math.random() * 10) >= 6
                ? resolve(fn('密码正确'))
                : reject(fn('密码错误')),
            3000
          );
        });
      },
    });
  },
  openTimed() {
    clearTimeout(this.timeout);
    const hide = $wuxKeyBoard().show({
      password: false,
      maxlength: -1,
      onChange(value: string) {
        console.log(`输入的密码是：${value}`);
      },
      onClose() {
        return false;
      },
    });

    this.timeout = setTimeout(() => {
      hide();
    }, 3000);
  },
});

API

| 参数 | 类型 | 描述 | 默认值 | | --------------------- | --------------- | -------------------------------------------- | ------------ | | options | object | 配置项 | - | | options.prefixCls | string | 自定义类名前缀 | wux-keyboard | | options.className | string | 自定义类名 | - | | options.titleText | string | 标题 | 安全键盘 | | options.cancelText | string | 取消按钮的文字 | 取消 | | options.inputText | string | 提示文本 | 输入数字密码 | | options.showCancel | boolean | 是否显示取消按钮 | true | | options.disorder | boolean | 是否打乱键盘 | false | | options.password | boolean | 是否密码类型 | true | | options.maxlength | number,string | 最大输入长度，设置为 -1 的时候不限制最大长度 | 6 | | options.closeOnReject | boolean | Promise 返回 reject 时关闭组件 | true | | options.onChange | function | change 事件触发的回调函数 | - | | options.callback | function | 输入完成后的回调函数 | - | | options.onClose | function | 输入完成后的回调函数，优先级高于 callback | - |