# PwdInput 密码输入弹层

# 引入说明

TIP

import PwdInput from "jimoui/components/PwdInput/PwdInput";

# 代码演示

TIP

！！！注意  payTypeName 和 moneyNum存在，payTypeDesc参数无用

<PwdInput 
    ref="PwdInput" 
    :tipType="1"
    tipContent="已错误5次，<br>即将锁定你的支付密码请点击忘记密码进行找回"
    :payTypeName="'美通卡'"
    :payTypeDesc="'美通卡支付：￥80'"
    :moneyNum="'80'"
    :upsetStatus="false"
    :spaceStatus="true"
    :isOnlyNumber="false"
    :operateTip="'首次使用XXX，请先前往XXXAPP中设置支付密码'"
    @onChanged="onChanged" 
    @bindOperateClick="bindOperateClick"
/>

<script>
export default kayakVue({
    methods: {
        // 支付密码输入完成的回调 password 输入的支付密码
        onChanged(password) {
            console.log("onChanged", password);
            if(String(password).length < 6) {
                return;
            }
            
            if(password == "123456") {
                this.tipType = 2;
                this.tipContent = "已错误5次，即将锁定你的支付密码请点击忘记密码进行找回";
                this.$refs.PwdInput.clearPassWord();
            } else {
                this.$refs.PwdInput.change(false);
            }
        },
        // 忘记密码按钮等操作回调函数
        bindOperateClick() {
            console.log("bindOperateClick");
        }
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 属性

配置	用途	取值	是否必填	使用描述
title	弹窗标题	String	否	默认：请输入支付密码
tipType	提示类型 1:正常显示 2:错误显示	Number/String	否	默认1
payTypeName	支付类型名称	String	否	默认空
payTypeDesc	支付类型描述	String	否	默认空，payTypeName 和 moneyNum存在，这个参数无用
moneyNum	支付金额	Number/String	否	默认空
tipContent	错误显示提示信息	String	否	tipType 为2时为必填项，字符串内可以有html标签
upsetStatus	键盘的数字是否乱序	Boolean	否	默认false，正序
spaceStatus	输入框是否有间距	Boolean	否	默认true
operateTip	操作提示文案	String	否	默认空
operateBtnText	操作提示按钮文案	String	否	默认：忘记密码?
isOnlyNumber	密码输入框部分是否只显示数字	Boolean	否	默认：false 备注：输入的支付密码是否直接显示出来，否是从数字渐变成一个点
@onChanged	支付密码输入完成的回调	$Event	否	回调的参数：输入数字的字符串 String
@bindOperateClick	忘记密码按钮等操作回调函数	$Event	否