更新记录

1.1.0(2021-04-01)

2021-04-01 V1.1.0

  1. 完善样式,添加按键按下的动画。
  2. 添加title属性,可自定义提示标题

1.0(2021-03-31)

2021-03-31 1.0.0 发布插件

查看更多

📌 组件介绍

1. 主要功能

  1. 主要针对要输入6位数字密码的场景使用,自带模拟键盘。
  2. 代码简单,如与业务有差别或者想要修改样式,可查看组件源码,自行修改。(部分关键代码已做注释)
  3. 适用于App/H5/微信小程序(其他端未测试)

2. 使用方法

  1. 导入该组件。
  2. 推荐作为一个弹出层来使用。在要需要输入密码的页面引入该组件,在需要输入密码时,使该组件显示,即可输入密码。
  3. 输入完成并验证密码正确后,可使用success()回调函数进行监听。
  4. 对于密码的正确与否,可以在组件内进行验证,也可在success()回调函数中进行验证。
  5. 组件中使用到了两个图片,为了上传组件方便,我使用url链接直接引入了。开发人员可自行替换本地图片或其他。

3. 代码示例

<template>
    <view>
        <button type="primary" @tap="openModal">输入密码</button>
        <payKeyboard v-if="showKeyBoard" title="Mi安全键盘" @success="enterSuccess" @close="close"></payKeyboard>
    </view>
</template>

<script>
    import payKeyboard from '@/components/mi-payKeyboard/mi-payKeyboard.vue'
    export default {
        components: { payKeyboard },
        data() {
            return {
                showKeyBoard: false,
            };
        },
        methods: {
            // 打开输入框
            openModal() {
                this.showKeyBoard = true
            },
            // 输入正确的回调
            enterSuccess(password) {
                console.log(password) // 输入的密码
                this.showKeyBoard = false
            },
            // 点击[取消] 关闭输入框 的回调
            close(){
                this.showKeyBoard = false
            }
        }
    }
</script>

4. 参数

参数 类型 默认值 描述
title String 安全键盘 模拟键盘中间部分的标题
@success Fun -- 输入成功后的回调函数
@close Fun -- 点击键盘左下方【取消】后的回调

@success()返回的参数

参数 类型 描述
password String 输入的密码

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问