# yuPasswordInput 组件
密码输入组件,弹出框形式。
# 效果预览
基础示例
<template>
<div>
<van-button @click="passwordShow = true">点击输入密码</van-button>
<yu-password-input :password-show.sync="passwordShow" :money="money" @cancel="cancelPay"
type="transfer" title="请输入六位支付密码"
receiveNum="2734739574547716"
receiveBank="中国银行" receiveName="宇信小甜甜" :payAct="banNum" @confirm="comfirmPay">
</yu-password-input>
</div>
<template>
<script>
import yuPasswordInput from '@/components/yu-password-input/index.vue';
export default {
components: {
yuPasswordInput
},
data() {
return {
passwordShow: false,
money: '2000',
banNum: '6217898356782450001',
};
},
methods: {
cancelPay() {
},
comfirmPay(value) {
console.log("输入密码", value)
}
}
};
</script>
# Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | 弹出框场景类型 | String | transfer simple complex | transfer |
passwordShow | 是否显示弹出框 | Boolean | false true | false |
title | 标题 | String | - | 请输入取款密码 |
subTitle | 小标题type="complex"时有效 | String | - | - |
errorInfo | 错误提示信息 | String | - | - |
actName | 账户名称type="complex"时有效 | String | - | - |
money | 转账金额type="transfer"时有效 | String | - | - |
payAct | 转账付款账户type="transfer"时有效 | String | - | - |
receiveName | 收款名称 type="transfer"时有效 | String | - | - |
receiveBank | 收款行type="transfer"时且receiveName不为空时有效 | String | - | - |
receiveNum | 收款账号type="transfer"时有效 | String | - | - |
randomKeyOrder | 是否开启随机数键盘 | Boolean | true false | true |
pwdLength | 密码长度 | String | - | 6 |
isValidate | 是否开启密码校验,默认包含长度校验、非空校验 type="simple"时无效 | Boolean | true false | true |
# Events
方法名 | 说明 | 参数 |
---|---|---|
input | 键盘输入事件 | 输入的值 |
delete | 键盘删除事件 | 当前剩余密码值 |
focus | 键盘聚焦事件 | - |
confirm | 确定按钮点击事件 | 当前输入的密码值 |
cancel | 单击右上角关闭图标点击确认取消回调事件 | - |