小程序键盘组件

说明

• 当前版本

  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包中不包含英文乱序键盘

体验&作者微信

npm版本更新

• v1.2.0

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

• v1.1.2

  • 更新说明文档

• v1.1.0

  • 更新名称

    • CarCardboard->carKeyboard
    • CarCardInput->carKeyInput

  • 新增组件

    • TypeInput 和 CarInputboard

  • 修复

    • 修复了CarCardboard组件在页面进入如时闪的问题

  • 其他

  • 删除了一些不该有的打印日志和不必要参数