# 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 单击右上角关闭图标点击确认取消回调事件 -
Last Updated: 5/15/2024, 4:47:26 PM