更新记录
v0.0.1(2021-11-13)
下载此版本
v0.0.1 初次发布
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
× |
× |
√ |
使用方法
<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
- 个人博客:薛小帅
- 个人公众号:叮当Ding