更新记录
1.0.1(2024-07-15) 下载此版本
上传示例
1.0.0(2024-07-12) 下载此版本
上传
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
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>