Skip to content

Latest commit

 

History

History
95 lines (66 loc) · 4.61 KB

README.MD

File metadata and controls

95 lines (66 loc) · 4.61 KB
Raw

项目介绍：

这是一个多功能输入框组件，该组件是从『蒲公英小程序』登录页面中抽取出来。
初衷是为了解决输入框功能的复用以及保证代码整洁。

组件说明文档

payer-input-panel组件说明文档

该组件是从『蒲公英开发者服务平台』小程序的登录页面抽离出来的。

一、集成方式

  1. 将组件中的文件目录拷贝到小程序当前目录文件下，包括以下目录的所有文件；

    /components

    /const

    /image

    /utils

  2. 在需要使用组件的页面 json 文件夹下添加

      "usingComponents": {
    "pgyer-input": "/components/pgyer-input-panel/pgyer-input-panel"
  }

  3. 在 wxml 文件中的调用

    <pgyer-input type="" value="" placeholder="" bindverifyevent="" ></pgyer-input>

v1.0.0 版本：

二、通用属性说明列表：

属性名 类型 默认值 说明
value String 输入框中的内容
type String "telOrEmail" 表示输入框类型的，目前有四个类型（"tel","password","verificationCode",telOrEmail）
placeholder String 默认根据不同的type 显示不同的提示 placeholder : 显示自定义值

placeholder 无自定义值通过类型分别显示默认值
tel ： 请输入电话号码
telOrEmail : 请输入电话号码或者邮箱
verificationCode : 请输入验证码
password : 请输入密码
reminder String 默认根据不同的type 显示不同的提示 reminder : 显示自定义值

reminder 无自定义值通过类型分别显示默认值
tel ： 输入的手机号码有误
telOrEmail : 输入的邮箱或者手机号码有误
verificationCode : 输入的验证码有误
password : 输入的密码有误
confirm_type String "done" send : 右下角按钮为“发送”
search : 右下角按钮为“搜索”
next : 右下角按钮为“下一个”
go : 右下角按钮为“前往”
done 右下角按钮为“完成”
bindverifyevent EventHandle 每次输入，根据 type 类型返回验证结果触发
event.detail.pgyerResult = "true"/"false" ： 返回 true (合法) / false (不合法)
bindconfirm EventHandle 点击完成按钮时触发，event.detail = {value: value}
bindclear EventHandle 点击清楚按钮触发

type = "tel" 特定属性

属性名 类型 默认值 说明
country_code String 86 国家码
bindcountry_code EventHandle 点击countrycode触发事件

type = "verificationCode" 特定属性

属性名 类型 默认值 说明
validationlabel String “获取验证码” 注意：在倒计时完成或终止以后，默认的值改变为 “再次获取验证码”
active String 'fasle' 获取验证码是否可以点击
false 不可点击
true 可以点击，并且开始倒计时
count_down String 60 获取倒计时时间
bindverification_label EventHandle 点击验证按钮触发事件

三、自定义属性和验证规则

  1. 以上的四个默认值可以通过修改 const/pgyerInputConsts.js内容自定义
const DATA = {
  DEAFULT_COUNTRY_CODE: '86',
  DEAFULT_COUNT_DOWN_NUM : '60',
  DEFAULT_GET_PHONE_VALIDATION_LABEL_ : "获取验证码",
  DEFAULT_REGET_PHONE_VALIDATION_LABEL : "再次获取验证码",
}

停止倒计时的方法：

// wxml 定义组件 id
<pgyer-input id="component-id" value="" type="tel" ></pgyer-input>

//js 文件中
let component = this.selectComponent('#component-id');
component.stopCuntDown();    // 停止计时方法
  1. 修改验证规则，可以通过修改 utils/pgyerVerifyUtils.js 文件中的方法