小程序键盘组件

说明

• 当前版本

  v1.2.0

• npm 下载

  npm i miniprogram-keyboard-type -S

• * 为新增功能

• 组件分别为 弹窗式密码键盘 车牌式车牌键盘 * 输入框车牌键盘

• • 适配 DarkMode 相关链接

• 使用说明

  "usingComponents": {
     "Passwordkeyboard": "/您的路径/Passwordkeyboard/index"
  }	

  <Passwordkeyboard 
      valueLength="{{6}}" 
      title="密码键盘" 
      anonymous 
      isShow="{{isShow}}" 
      bind:onConfirm=""
      bind:onCancel=""
  />

• 可修改样式(wxss)

  class类	备注
  right_key	删除键样式
  btn-confirm	弹窗确认键

• 需求参数

  参数	说明	类型	是否必传	备注
  title	标题	String	是
  valueLength	长度	Number	否	默认为6
  anonymous	是否密文	Boolean	否	UI显示为 *
  isShow	显示	Boolean	是
  zIndex	z-index 层级	Number	否	默认为50
  safe-area-inset-bottom	ios安全底部	Boolean	否

• 事件

  事件	说明	参数
  onCancel	取消时触发	-
  onConfirm	确认时触发	{'value':'123456'}

输入框车牌键盘

• 说明

  • 请CarTypeInput 与 CarInputboard 配合使用。
  • CarTypeInput 可以在 from 中使用
  • 与 carKeyboard与 CarInputboard 的不同
    • 除样式相同外,删除了一些在使用TypeInput 不必要的参数和方法
    • CarInputboard 不包含正则
  • 为了更好的体验需要您帮助组件做个一个模拟失去焦点的功能
    • 需要一个顶级view绑定一个点击事件在页面中
    • CarInputboard 将它放在顶级view外

• 使用说明

  "CarTypeInput": "/component/CarTypeInput/index",
  "CarInputboard":"/component/CarInputboard/index"

  <CarTypeInput 
      bind:onfocus="onfocus"
      placeholder=""
      name="carNum" 
      value="{{value}}"
      isBlur="{{isblur}}"
   />
  <CarInputboard
      isBlur="{{isblur}}"
      bind:ListenValue="getValue"  
      bind:onConfirm="onConfirm"
      isShow="{{show}}"
  />
  <!-- 需要您做的模拟失去焦点 -->
    <view bindtap="blur">
          <view></view>
          <view></view>
          <TypeInput 
            bind:onfocus="onfocus"
            placeholder=""
            name="carNum" 
            value="{{value}}"
            isBlur="{{isblur}}"
         />
        <view></view>
        <view></view>
    </view>
    <CarInputboard
        isBlur="{{isblur}}"
        bind:ListenValue="getValue"  
        bind:onConfirm="onClickBox"
        isShow="{{show}}"
    />

  Page({
    data: {
      show:false,
      value:'',
      isblur:true,
    },
    //失去焦点时
    blur(e){
      this.setData({
        show:false,
        isblur:true,
      })
    },
  //TypeInput 获取焦点(点击)触发
    onfocus(e){
      this.setData({
        show:true,
        isblur:false,
      })
    },
    //点击键盘完成时触发
    onConfirm(){
      this.setData({
        show:false,
        isblur:true
      })
    },
    getValue(e){
      this.setData({
        value:e.detail.value
      })
    }
  })

• 可修改样式(wxss)

  • TypeInput

    class类	备注
    typeinput	输入框样式

• 需求参数

  • TypeInput

    参数	说明	类型	是否必传	备注
    value	值	String	是
    height	input高	Number	否	默认60px
    placeholder	输入框为空时占位符	String	否
    isBlur	是否失去聚焦	Boolean	是
    lineColor	光标颜色	16进制	否	默认#333
    name	key值	String	否	from 内使用必传

    • height 影响光标高度
    • name 在from 内使用必传
    • isBlur true为失去焦点

  • CarInputboard

    参数	说明	类型	是否必传	备注
    isShow	是否显示键盘	String	是	必传
    isBlur	是否失去聚焦	Number	是	必传
    safeAreaInsetBottom	ios安全底部	String	否

    • isBlur true为失去焦点

• 事件

  • TypeInput

    事件	说明	参数
    onfocus	获取焦点时	-

  • CarInputboard

    事件	说明	参数
    ListenValue	监听值变化	’value‘:值,‘sub‘:长度,exp:正则信息
    onConfirm	点击完成时触发	-

车牌式车牌键盘

• 说明

  • 请carKeyboard 与 carKeyInput 配合使用
  • 注意事项
    • 在需需要您使用CarCardInput 的 onChangeCard 获取的 CarNumid 传递给CarCardboard 组件

• 参考资料

  • 中国车牌号规则

  • 中华人民共和国民用机动车号牌

• 使用说明

  "CarCardInput": "/您的路径/CarCardInput/index"
  "CarCardboard": "/您的路径/carKeyInput/index"

  <CarCardInput  
      value="{{value}}" 
      bind:onChangeCard="onChangeCard"
      bind:onClickBox="onClickBox"
  />
  <CarCardboard 
      bind:ListenValue="getValue"  
      bind:onConfirm="onClickBox"
      CarNumid="{{CarNumid}}"
      isShow="{{show}}"
  />

  Page({
    data: {
      value:"",
      valueStr:'',
      CarNumId: 0,
      show:false
    },
    getValue(e){
      const value = e.detail.value;
      this.setData({
        value: value, // 值为数组
        valueStr: value.join('').toString(), // 获得的车牌字符串
        msg: e.detail.exp.msg || '' // 正则返回信息
      })
    },
    // 当车牌类型卡片改变时触发
    onChangeCard(e) {
      this.setData({
        CarNumId: e.detail.CarNumId
      })
    },
    // 点击完成或点击输入框时触发(键盘展示关闭)
    onClickBox(e){
      const {show} = this.data; 
      this.setData({
        show:!show
      })
    }
  })

• 需求参数

  • CarCardInput

    参数	说明	类型	是否必传	备注
    value	渲染值	Array	是
    showCard	是否显示切换卡	Boolean	否

  • CarCardboard

    参数	说明	类型	是否必传	备注
    CarNumid	车牌类型下标	Number	是
    safe-area-inset-bottom	ios安全底部	Boolean	否

• 事件

  • carKeyInput

    事件	说明	参数
    ChangeCard	当车牌类型卡片改变时	CarNumid
    onClickBox	点击时触发	-

  • carKeyInput

    事件	说明	参数
    ListenValue	监听值变化	’value‘:值,‘sub‘:长度,exp:正则信息
    onConfirm	点击完成时触发	-

乱序英文键盘（移除）

项目中留存，npm包中不包含英文乱序键盘

体验&作者微信

git版本更新

v1.2.202001002

• 新增功能
  • CarCardInput 新增是否显示切换卡
  • 适配 DarkMode
• 更新名称
  • TypeInput(叫TypeInput可能打包不进去？) ->CarTypeInput

v1.1.20200515

• 更新名称
  • CarCardboard->carKeyboard
  • CarCardInput->carKeyInput
• 新增组件
  • TypeInput 和 CarInputboard
• 修复
  • 修复了CarCardboard组件在页面进入如时闪的问题
• 其他
  • 删除了一些不该有的打印日志和不必要参数
  • 作者微信

v1.1.20200411

• carKeyboard
  • 添加正则(实装)
  • 键盘动画效果
  • 车牌渲染效果

v1.1.20200410

• Passwordkeyboard

  • 1.修复密码键盘还能多输1位的问题
  • 2.密码键盘ios安全底部
  • 3.输入位数提示

• carKeyboard

  • 添加正则(未实装)