使用方法
<x-pay-pwd
ref="xPayPwd"
:type="1"
:maskClick="true"
top="unset"
bottom="0rpx"
:showClose="false"
@change="change"
:showHead="true"
headText="请输入支付密码"
>
<template #center>
<button @click="clear">插槽</button>
</template>
</x-pay-pwd>
export default {
methods: {
// 监听输入框内容变化
change({password}){
console.log(password)
},
// 清空输入框内容,一般用于密码输错手动清空
clear(){
this.$refs.xPayPwd._clearKey();
}
}
}
属性
| 字段 | 类型 | 默认 | 描述 |
|---|---|---|---|
| type | Number | 1 | 0原生键盘 1自定义键盘 |
| maskClick | Boolean | true | 是否允许点击蒙版 |
| top | String | 20vh | 中间内容的top值,为absolute的top值 |
| bottom | String | 0rpx | 中间内容的bottom值,为absolute的bottom值 |
| showClose | Boolean | true | 是否显示关闭按钮 |
| showHead | Boolean | true | 是否显示标题 |
| headText | String | 请输入支付密码 | 标题文本 |
事件
| 事件名 | 默认参数 | 描述 |
|---|---|---|
| change | {password} | 监听内容输入,参数返回输入的内容 |
组件方法
| 方法名 | 描述 |
|---|---|
| _open | 打开弹窗 |
| _close | 关闭弹窗 |
| _clearnKey | 请空输入内容 |
注意
ios下输入框不会自动获取焦点,需要手动点击输入区域
参与贡献
- xueshuai(xueshuai_12@163.com)
- Email:xueshuai_12@163.com
- GitHub:GitHub地址
- QQ交流群:1063233592
- 个人博客:(薛小帅)[http://blog.xueshuai.top]
- 个人公众号:叮当Ding
