更新记录

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. 参数

@success()返回的参数