Files
dtx_store/components/readme.md
2022-06-12 13:09:03 +08:00

76 lines
2.2 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 使用方法
```
<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)
+ Emailxueshuai_12@163.com
+ GitHubGitHub地址
+ QQ交流群1063233592
+ 个人博客:(薛小帅)[http://blog.xueshuai.top]
+ 个人公众号叮当Ding
![叮当Ding](https://img-blog.csdnimg.cn/20210202143040150.png)