更新记录

1.0.1（2024-07-15） 下载此版本

上传示例

1.0.0（2024-07-12） 下载此版本

上传

平台兼容性

mosowe-number-keyboard

支持number输入和身份证输入

内置了max、min等校验及提示语。摆脱自带键盘输入需要处理的一堆校验问题。

返回的值是string类型的number。

因为是模拟的input输入框，不支持点击光标定位，默认光标就在最后。

props

emits

因为是自定义键盘，不能自动顶起页面，需要自行配置相关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>