更新记录

0.0.2（2025-03-12） 下载此版本

0.0.2

-- 增加数字键盘 -- 增加密码模式

0.0.1（2024-12-06） 下载此版本

首次发布

• 键盘组件；转账静态页面

平台兼容性

PanKeyboard 组件文档

概述

PanKeyboard 是一个自定义键盘组件，适用于需要数字输入的场景。支持小数输入、数值限制及自定义提交按钮文本等功能。

属性 (Props)

type

• 类型: String
• 默认值: 'amount'
• 描述: 键盘类型，可选值为 'amount'（金额键盘）和 'numeral'（数字键盘）。

isDecimal

• 类型: Boolean
• 默认值: true
• 描述: 是否可以输入小数，仅在 type 为 'amount' 时有效。

submitButtonText

• 类型: String
• 默认值: '确定'
• 描述: 提交按钮的文本，仅在 type 为 'amount' 时有效。

toFixed

• 类型: String | Number
• 默认值: 2
• 描述: 保留小数位数，最大值为3，仅在 type 为 'amount' 时有效。

maxValue

• 类型: String | Number
• 默认值: 100000000（1亿）
• 描述: 输入的最大值，仅在 type 为 'amount' 时有效。

isCheck

• 类型: Boolean
• 默认值: true
• 描述: 提交按钮是否通过校验，仅在 type 为 'amount' 时有效。

isPassword

• 类型: Boolean
• 默认值: true
• 描述: 是否为密码模式（固定6位数密码），仅在 type 为 'numeral' 时有效。

方法 (Methods)

事件 (Events)

示例用法

<template>
  <div>
    <pan-keyboard
      :isDecimal="true"
      :submitButtonText="'确认'"
      :toFixed="2"
      :maxValue="10000"
      :isCheck="true"
      @onChange="handleInputChange"
      @onSubmit="handleSubmit"
      @onError="handleError"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  methods: {
    handleInputChange(value) {
      console.log('Input changed:', value);
    },
    handleSubmit(value) {
      console.log('Form submitted:', value);
    },
    handleError(error) {
      console.error('Error occurred:', error);
    }
  }
};
</script>

注意事项

1. 小数输入：当 isDecimal 为 false 时，键盘将不显示小数点按键。
2. 数值限制：输入值不能超过 maxValue，否则会触发 onError 事件。
3. 提交按钮：提交按钮的状态由 isCheck 控制，未通过校验时按钮将不可点击。
4. 设置初始值: 调用组件实例this.$refs.PanKeyboard.setKeyboard(1000)

希望这份文档能帮助你更好地理解和使用 PanKeyboard 组件。如果有任何问题或建议，请随时联系。