QinUi

# InputNumber 数字输入框

统一封装

# 基础用法

<template>
  <qinui-input-number v-model="value" />
</template>

<script>
  export default {
    data() {
      return {
        value: 1,
      };
    },
  }
</script>

# 步长设置

设置 :step="2"

<template>
  <qinui-input-number :step="2" />
</template>

# 限制输入范围

设置 :minlength="2" 和 :maxlength="max3"

<template>
  <qinui-input-number :minlength="2" :maxlength="5" />
</template>

# 禁用状态

设置 :disabled="true"

<template>
  <qinui-input-number :disabled="true" />
</template>

# 禁用长按

设置 :longPress="false"

<template>
  <qinui-input-number :longPress="false" />
</template>

# 异步变更

设置 :beforeClick="beforeClick"

<template>
  <qinui-input-number
    v-model="value"
    :beforeClick="beforeClick"
  />
</template>
<script>
  export default {
    data() {
      return {
        value: 3,
      };
    },
    methods: {
      beforeClick() {
        return new Promise((resolve) => {
          qin.showLoading({
            title: '正在加载',
          });
          setTimeout(() => {
            qin.hideLoading();
            resolve(true);
          }, 3000);
        });
      },
    },
  };
</script>

# din 字体

设置 :din="true"

<template>
  <qinui-input-number :din="true" />
</template>

# 大号

设置 size="large"

<template>
  <qinui-input-number size="large" />
</template>

# API

# Props

参数 说明 类型 默认值 可选值
modelValue(v-model) 输入内容 String | Number - -
minlength 最小值 String | Number 1 -
maxlength 最大值 String | Number Number.MAX_SAFE_INTEGER -
step 步长 String | Number 1 -
integer 是否只允许输入整数 Boolean true -
disabled 是否禁用，包括输入框，加减按钮 Boolean false -
decimalLength 显示的小数位数 String | Number | null null -
longPress 是否开启长按加减手势 Boolean true -
disablePlus 是否禁用增加按钮 Boolean false -
disableMinus 是否禁用减少按钮 Boolean false -
disableMinus 是否禁用减少按钮 Boolean false -
iconStyle 加减按钮图标的样式 String - -
diyStyle 自定义外部样式，如：设置边框等样式 String - -
size 尺寸 String default default | large
din 是否文字是 din 字体 Boolean false -
beforeClick 点击之前触发 Function - -

# Events

事件名 说明 回调参数
@change 改变值触发 -

← Textarea 文本域 →