BIN-UI-DESIGN

Appearance

On this page

数字输入 InputNumber ​

用于输入数字

基础用法 ​

<template>
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number
        v-model="value1"
        :max="10"
        :min="1"
        arrow-up-icon="plus"
        arrow-down-icon="minus"
      ></b-input-number>
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value1" :max="10" :min="1" always></b-input-number>
    </b-col>
  </b-row>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(1)
</script>
<template>
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number
        v-model="value1"
        :max="10"
        :min="1"
        arrow-up-icon="plus"
        arrow-down-icon="minus"
      ></b-input-number>
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value1" :max="10" :min="1" always></b-input-number>
    </b-col>
  </b-row>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(1)
</script>

初始化值 ​

默认控件初始化值为null，这时如果绑定的属性值为undefined，则会改变默认值为null（因为undefined转换为数字之后为NaN）， 如果默认传输为字符串，则也会进行一次值的转换，如能转换为数字，则会根据最大最小值进行数字转换。否则也会置空。

初始化值为null(绑定属性存在）
初始化值为字符串
初始化值为undefined(绑定属性不存在）

{ "num1": null, "num2": 1, "num3": null }

<template>
  <div>
    <b-row :gutter="16">
      <b-col span="6">
        <b-input-number v-model="obj.num1"></b-input-number>
        初始化值为null(绑定属性存在）
      </b-col>
      <b-col span="6">
        <b-input-number v-model="obj.num2" :min="1" :max="10"></b-input-number>
        初始化值为字符串
      </b-col>
      <b-col span="6">
        <b-input-number v-model="obj.num3"></b-input-number>
        初始化值为undefined(绑定属性不存在）
      </b-col>
    </b-row>
    <p>{{ obj }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const obj = ref({ num1: null, num2: '0', num3: undefined })
</script>
<template>
  <div>
    <b-row :gutter="16">
      <b-col span="6">
        <b-input-number v-model="obj.num1"></b-input-number>
        初始化值为null(绑定属性存在）
      </b-col>
      <b-col span="6">
        <b-input-number v-model="obj.num2" :min="1" :max="10"></b-input-number>
        初始化值为字符串
      </b-col>
      <b-col span="6">
        <b-input-number v-model="obj.num3"></b-input-number>
        初始化值为undefined(绑定属性不存在）
      </b-col>
    </b-row>
    <p>{{ obj }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const obj = ref({ num1: null, num2: '0', num3: undefined })
</script>

小数 ​

小数步长:0.2
精度范围:2 
<template>
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number v-model="value1" :max="10" :min="1" :step="0.2"></b-input-number>
      小数步长:0.2
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value2" :precision="2"></b-input-number>
      精度范围:2
    </b-col>
  </b-row>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(1)
const value2 = ref(null)
</script>
<template>
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number v-model="value1" :max="10" :min="1" :step="0.2"></b-input-number>
      小数步长:0.2
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value2" :precision="2"></b-input-number>
      精度范围:2
    </b-col>
  </b-row>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(1)
const value2 = ref(null)
</script>

可以格式化 ​

<template>
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number
        v-model="value1"
        :max="10000"
        :formatter="value => `$ ${value}`.replace(/B(?=(d{3})+(?!d))/g, ',')"
        :parser="value => value.replace(/$s?|(,*)/g, '')"
      ></b-input-number>
    </b-col>
    <b-col span="6">
      <b-input-number
        v-model="value2"
        :max="100"
        :formatter="value => `${value}%`"
        :parser="value => value.replace('%', '')"
      ></b-input-number>
    </b-col>
  </b-row>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(1)
const value2 = ref(1)
</script>
<template>
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number
        v-model="value1"
        :max="10000"
        :formatter="value => `$ ${value}`.replace(/B(?=(d{3})+(?!d))/g, ',')"
        :parser="value => value.replace(/$s?|(,*)/g, '')"
      ></b-input-number>
    </b-col>
    <b-col span="6">
      <b-input-number
        v-model="value2"
        :max="100"
        :formatter="value => `${value}%`"
        :parser="value => value.replace('%', '')"
      ></b-input-number>
    </b-col>
  </b-row>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(1)
const value2 = ref(1)
</script>

不同尺寸 ​

提供三种额外不同尺寸

<template>
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number v-model="value" size="mini"></b-input-number>
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" size="small"></b-input-number>
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value"></b-input-number>
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" size="large"></b-input-number>
    </b-col>
  </b-row>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(1)
</script>
<template>
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number v-model="value" size="mini"></b-input-number>
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" size="small"></b-input-number>
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value"></b-input-number>
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" size="large"></b-input-number>
    </b-col>
  </b-row>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(1)
</script>

多种状态 ​

禁用，只读和不可编辑三种状态

disabled
readonly
editable="false"

disabled
readonly
editable="false" 
<template>
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number v-model="value" disabled></b-input-number>
      disabled
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" readonly></b-input-number>
      readonly
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" :editable="false"></b-input-number>
      editable="false"
    </b-col>
  </b-row>
  <br />
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number v-model="value" disabled always></b-input-number>
      disabled
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" readonly always></b-input-number>
      readonly
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" :editable="false" always></b-input-number>
      editable="false"
    </b-col>
  </b-row>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(1)
</script>
<template>
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number v-model="value" disabled></b-input-number>
      disabled
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" readonly></b-input-number>
      readonly
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" :editable="false"></b-input-number>
      editable="false"
    </b-col>
  </b-row>
  <br />
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number v-model="value" disabled always></b-input-number>
      disabled
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" readonly always></b-input-number>
      readonly
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" :editable="false" always></b-input-number>
      editable="false"
    </b-col>
  </b-row>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(1)
</script>

Props ​

参数说明类型可选值默认值
max最大值Number-Infinity
min最小值Number-Infinity
modelValue当前值，可以使用 v-model 双向绑定数据Number-1
step每次改变的步伐，可以是小数Number-1
size输入框尺寸Stringlarge、small、default或者不填-
disabled设置禁用状态Boolean-false
placeholder占位文本String--
formatter指定输入框展示值的格式Function--
parser指定从 formatter 里转换回数字的方式，和 formatter 搭配使用Function--
readonly是否设置为只读Boolean-false
editable是否可编辑Booleantrue
precision数值精度Number-
active-change是否实时响应数据Booleantrue
arrow-up-icon普通模式下箭头图标Stringup
arrow-down-icon普通模式下箭头图标Stringdown
always是否始终显示控制器Booleantrue-

Events ​

事件名说明返回值
change数值改变时的回调返回当前值 当前值
focus聚焦时触发event
blur失焦时触发-

MIT Licensed | Copyright © 2023-present bin-ui-design