UmsKeyboard
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| isRandom | Boolean | false | 键盘的顺序是否打乱（只有数字键盘有用） |
| keyboardInput | function | 具有键值的按键的事件处理函数 | |
| onConfirmClick | function | "确定"按钮的事件处理函数 | |
| onNextClick | function | '下一步'按钮的事件处理函数 | |
| limit | number | 11 | 键盘输入的位数，包含小数和小数点的长度 |
| prefix | String | ￥ | 金额类型下，值的前缀 |
| suffix | String | 金额类型下，值的后缀 | |
| disabledKeys | Array | 禁用键 数字键和字母键输入直接写值就行，特殊键按下面说明 |
键盘的类型
| 值 | 说明 |
|---|---|
| alpha | 字母加数字键盘 |
| number | 数字键盘 |
| amount | 金额键盘 |
WARNING
必须传入配置对象
禁用键
| 值 | 说明 |
|---|---|
| delete | 删除键 |
| clear | 清空键 |
| next | 下一步 |
| confirm | 确认键 |
| shift | 上档键 |
| dot | 逗号键 |
| alpha | 英文键 |
| number | 数字键 |
| space | 空格键 |
组件使用
键盘类型
<div v-keyboard.alpha="{}"></div>
<div v-keyboard.number="{}"></div>
<div v-keyboard.amount="{}"></div>
配置键盘，和事件监听机制
<div v-keyboard.number="{isRandom:true}"></div>
<div v-keyboard.number="{keyboardInput:...}"></div>
<div v-keyboard.alpha="{onConfirmClick:...}"></div>
<div v-keyboard.amount="{onConfirmClick:...}"></div>
<div v-keyboard.number="{onNextClick:...}"></div>
代码示例
<template>
<div class="content">
<ums-header title="keyBoard" :right="false" leftPartText="返回" @onLeftPartClick="back"></ums-header>
<div style="flex-direction:row;margin-top:10px">
<div class="test" @click="keyboardType('number')">
<text>number</text>
</div>
<div class="test" @click="keyboardType('random')">
<text>random</text>
</div>
<div class="test" @click="keyboardType('amount')">
<text>amount</text>
</div>
<div class="test" @click="keyboardType('alpha')">
<text>alpha</text>
</div>
</div>
<text style="font-size:48px;margin-top:50px;">{{value}}</text>
<div v-keyboard.number="{keyboardInput:showKeyboardValue}" v-if="type ==='number'"></div>
<div v-keyboard.number="{isRandom:true,keyboardInput:showKeyboardValue}" v-if="type ==='random'"></div>
<div v-keyboard.amount="{keyboardInput:showKeyboardValue}" v-if="type ==='amount'"></div>
<div v-keyboard.alpha="{keyboardInput:showKeyboardValue}" v-if="type ==='alpha'"></div>
</div>
</template>
<script>
import {UmsKeyboard,UmsHeader} from 'ums-comp';
var navigator = weex.requireModule('navigator');
export default{
data(){
return {
value:'',
type:'number'
}
},
components:{
UmsHeader
},
directives:{
keyboard: UmsKeyboard
},
methods:{
keyboardType(kt){
this.type = kt;
},
showKeyboardValue(val){
this.value = val;
},
back(){
navigator.pop()
}
}
}
</script>
<style scoped>
.test{
width: 200px;
height: 100px;
border-width: 1px;
justify-content: center;
align-items: center;
}
.content{
flex-direction: column;
align-items: center;
}
</style>
效果展示
** 数字键盘 **
** 字母键盘 **
