Keyboard 数字键盘


基础用法

使用visibletipslenconfirmTextstyleName属性来定义 Keyboard 的样式。

  1. <xm-cell-group>
  2. <xm-cell-item>
  3. <span slot="left">房间租金</span>
  4. <div slot="right" class="xm__cell-right" @click="openCurKeyboard" data-tips='{"title":"房间租金", "placeholder":"请输入房间租金", "name":"roomRentVal", "unit":"这里无效", "isCard":false}' :data-val="roomRentVal">
  5. <xm-input v-model="roomRentVal" placeholder="元/月" disabled="disabled" ></xm-input>
  6. </div>
  7. </xm-cell-item>
  8. <xm-cell-item>
  9. <span slot="left">身份证号码</span>
  10. <div slot="right" class="xm__cell-right" @click="openCurKeyboard" data-tips='{"title":"身份证号码", "placeholder":"请输入身份证号码", "name":"idCardVal", "unit":"/月", "isCard":true}' :data-val="idCardVal">
  11. <xm-input v-model="idCardVal" placeholder="请输入身份证号码" disabled="disabled" ></xm-input>
  12. </div>
  13. </xm-cell-item>
  14. </xm-cell-group>
  15. <xm-keyboard :visible="keyBoardVisible" v-model="curVal" :tips="tips" :len="vLen" @confirm="save" @close="keyBoardClose"></xm-keyboard>

属性

参数 说明 类型 可选值 默认值
visible 输入框的显示隐藏 Boolean false
len 限制输出值的长度 Number 6
confirmText 确定按钮文字 String 确定
tips 输入框传入的字典,isCard:true适合身份证键盘,否则为带单位小数点数字键盘 Object 例如:{"title":"房间面积", "placeholder":"请输入房间面积", "name":"roomAreaVal", "unit":"㎡", "isCard":false}'

方法

参数 说明 类型 可选值 默认值
confirm 确定操作 Function 自定义
close 关闭操作 Function 自定义

原文: https://monw3c.github.io/xmui/#/components/keyboard