更新记录

v0.0.1(2021-11-13) 下载此版本

v0.0.1 初次发布


平台兼容性

Vue2 Vue3
×
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 请空输入内容

插槽

插槽名 描述
center 中间插槽

注意

ios下输入框不会自动获取焦点,需要手动点击输入区域

参与贡献

  • xueshuai(xueshuai_12@163.com)
  • Email:xueshuai_12@163.com
  • GitHub:GitHub地址
  • QQ交流群:1063233592
  • 个人博客:薛小帅
  • 个人公众号:叮当Ding

叮当Ding

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问