更新记录
1.0.1(2024-07-15)
下载此版本
上传示例
1.0.0(2024-07-12)
下载此版本
上传
平台兼容性
HbuilderX/cli最低兼容版本 |
3.1.0 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
mosowe-number-keyboard
支持number输入和身份证输入
内置了max、min等校验及提示语。摆脱自带键盘输入需要处理的一堆校验问题。
返回的值是string类型的number。
因为是模拟的input输入框,不支持点击光标定位,默认光标就在最后。
props
属性 |
说明 |
类型 |
默认 |
modelValue |
value值 |
string/number |
'' |
placeholder |
placeholder占位文案 |
string |
'请输入' |
float |
是否支持浮点数 |
boolean |
true |
precision |
浮点数精度,大于0的值 |
number |
- |
minus |
支持负数 |
boolean |
true |
max |
最大值 |
number |
- |
min |
最小值 |
number |
- |
maxlength |
整个值长度,包含负号和小数点在内 |
number |
- |
type |
键盘类型,number数字键盘,idCard身份证 |
'number' / 'idCard' |
'number' |
disabled |
禁用 |
boolean |
false |
confirmText |
键盘右下角按钮文案 |
string |
'确认' |
tip |
键盘左上角提示语 |
string |
'' |
cursorColor |
光标颜色 |
string |
'#000000' |
borderColor |
输入框边框颜色 |
string |
'rgba(0,0,0,0.5)' |
align |
对齐当时 |
'left' / 'right' |
'left' |
emits
emits |
说明 |
类型 |
confirm |
提交时触发 |
(num:string)=>void |
delete |
删除时触发 |
(num:string)=>void |
focus |
焦点获取时触发 |
(num:string)=>void |
blur |
焦点失去时触发 |
(num:string)=>void |
因为是自定义键盘,不能自动顶起页面,需要自行配置相关page-meta
属性触发。参考示例:
示例
<template>
<page-meta :page-style="isPaddingBottom ? 'padding-bottom:100vh;' : 'padding-bottom:0;'"></page-meta>
<view class="common-page">
<view class="common-title">默认:</view>
<mosowe-number-keyboard v-model="num1"></mosowe-number-keyboard>
<view class="common-title">初始值:</view>
<mosowe-number-keyboard v-model="num"></mosowe-number-keyboard>
<view class="common-title">小数位限制(:precision="2"):</view>
<mosowe-number-keyboard
v-model="num2"
:precision="2"></mosowe-number-keyboard>
<view class="common-title">整数限制(:float="false"):</view>
<mosowe-number-keyboard
v-model="num3"
:float="false"></mosowe-number-keyboard>
<view class="common-title">正整数限制(:float="false" :minus="false"):</view>
<mosowe-number-keyboard
v-model="num4"
:float="false"
:minus="false"></mosowe-number-keyboard>
<view class="common-title">最大值限制(:max="9999"):</view>
<mosowe-number-keyboard
v-model="num5"
:max="9999"></mosowe-number-keyboard>
<view class="common-title">最小值限制(:min="1"):</view>
<mosowe-number-keyboard
v-model="num6"
:min="1"></mosowe-number-keyboard>
<view class="common-title">长度限制(:maxlength="6"):</view>
<mosowe-number-keyboard
v-model="num7"
:maxlength="6"
@focus="isPaddingBottom = true"
@blur="isPaddingBottom = false"></mosowe-number-keyboard>
<view class="common-title">tip提示:</view>
<mosowe-number-keyboard
v-model="num8"
tip="这是一个tip"
@focus="isPaddingBottom = true"
@blur="isPaddingBottom = false"></mosowe-number-keyboard>
<view class="common-title">placeholder设置:</view>
<mosowe-number-keyboard
v-model="num9"
placeholder="请输入数字"
@focus="isPaddingBottom = true"
@blur="isPaddingBottom = false"></mosowe-number-keyboard>
<view class="common-title">右下角按钮设置:</view>
<mosowe-number-keyboard
v-model="num10"
confirmText="提交"
@focus="isPaddingBottom = true"
@blur="isPaddingBottom = false"></mosowe-number-keyboard>
<view class="common-title">光标颜色(cursorColor="#ff0000"):</view>
<mosowe-number-keyboard
v-model="num10"
cursorColor="#ff0000"
@focus="isPaddingBottom = true"
@blur="isPaddingBottom = false"></mosowe-number-keyboard>
<view class="common-title">边框颜色(borderColor="#ff0000"):</view>
<mosowe-number-keyboard
v-model="num10"
borderColor="#ff0000"
@focus="isPaddingBottom = true"
@blur="isPaddingBottom = false"></mosowe-number-keyboard>
<view class="common-title">右对齐(align="right"):</view>
<mosowe-number-keyboard
v-model="num10"
align="right"
@focus="isPaddingBottom = true"
@blur="isPaddingBottom = false"></mosowe-number-keyboard>
<view class="common-title">身份证(type="idCard"):</view>
<mosowe-number-keyboard
v-model="num11"
type="idCard"
@focus="isPaddingBottom = true"
@blur="isPaddingBottom = false"></mosowe-number-keyboard>
<view class="common-title">禁用(disabled):</view>
<mosowe-number-keyboard
v-model="num11"
disabled
@focus="isPaddingBottom = true"
@blur="isPaddingBottom = false"></mosowe-number-keyboard>
</view>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
const num = ref('123456123456123456123456123456123456123456');
watch(
() => num.value,
() => {
console.log(num.value);
}
);
const num1 = ref<any>(undefined);
const num2 = ref<any>(undefined);
const num3 = ref<any>(undefined);
const num4 = ref<any>(undefined);
const num5 = ref<any>(undefined);
const num6 = ref<any>(undefined);
const num7 = ref<any>(undefined);
const num8 = ref<any>(undefined);
const num9 = ref<any>(undefined);
const num10 = ref<any>(undefined);
const num11 = ref<any>(undefined);
const isPaddingBottom = ref(false);
</script>
<style lang="scss" scoped>
.common-title {
margin: 24rpx 0 12rpx 0;
}
</style>