找回密码
 立即注册

QQ登录

只需一步,快速开始

[Demo源码] 微信小程序多功能输入框组件

[复制链接]
查看: 528|回复: 102
最佳答案
0 

5

主题

6

帖子

130

积分

新人求带

积分
130
 楼主| 发表于 2018-9-4 16:11:05 | 显示全部楼层 |阅读模式
项目介绍:

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

组件说明文档

payer-input-panel组件说明文档

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

一、集成方式

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

  2. /const

  3. /image

  4. /utils
复制代码

在需要使用组件的页面 json 文件夹下添加
  1.   "usingComponents": {
  2.     "pgyer-input": "/components/pgyer-input-panel/pgyer-input-panel"
  3.   }
复制代码

在 wxml 文件中的调用
  1. <pgyer-input type="" value="" placeholder="" bindverifyevent="" ></pgyer-input>
复制代码

二、通用属性说明列表:
FireShot Capture 25 - GitHub - Pgyer_PgyerInputCompo_ - https___github.com_Pgyer.png

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

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

停止倒计时的方法:
  1. // wxml 定义组件 id
  2. <pgyer-input id="component-id" value="" type="tel" ></pgyer-input>

  3. //js 文件中
  4. let component = this.selectComponent('#component-id');
  5. component.stopCuntDown();    // 停止计时方法
复制代码

修改验证规则,可以通过修改 utils/pgyerVerifyUtils.js 文件中的方法
PgyerInputComponent-master.zip (12.91 KB, 下载次数: 35)
回复

使用道具 举报

最佳答案
0 

0

主题

8

帖子

140

积分

新人求带

积分
140
发表于 2018-9-4 16:36:30 | 显示全部楼层
感谢大佬  
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

103

帖子

1265

积分

专家路上

积分
1265
发表于 2018-9-4 17:00:44 | 显示全部楼层
感谢大佬  
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

53

帖子

70

积分

新人求带

积分
70
发表于 2018-9-4 19:04:36 | 显示全部楼层
谢谢,很好的文章
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

10

帖子

100

积分

新人求带

积分
100
发表于 2018-9-4 22:28:25 | 显示全部楼层
微信小程序多功能输入框组件
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

14

帖子

150

积分

等待验证会员

积分
150
发表于 2018-9-4 23:05:46 | 显示全部楼层
组件说明文档
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

591

帖子

9736

积分

S1

积分
9736
发表于 2018-9-5 08:54:57 | 显示全部楼层
感谢大佬  
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

18

帖子

88

积分

等待验证会员

积分
88
发表于 2018-9-5 09:50:06 | 显示全部楼层
44444444444444444444
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

971

帖子

860

积分

等待验证会员

积分
860
发表于 2018-9-5 10:23:33 | 显示全部楼层
21111111111111111111111111111111111111
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

971

帖子

860

积分

等待验证会员

积分
860
发表于 2018-9-5 10:23:38 | 显示全部楼层
212121212121212121212121212121212121212121212121212121212121
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com