数字输入框 num-input 待优化

用于输入数字

使用说明

简单引入

你需要通过v-model向该组件绑定一个Ref\<number\>变量用于接收和改变输入内容

展开代码

<template>
    <vi-num-input v-model="numOne"></vi-num-input>
</tempalte>

<script>
    const numOne = ref(0)
</script>

样式

你可以通过type属性更换输入框样式

展开代码

<template>
    <vi-num-input v-model="numTwo"></vi-num-input>
    <vi-num-input v-model="numTwo" type="plain"></vi-num-input>
    <vi-num-input v-model="numTwo" type="button"></vi-num-input>
</template>

<script>
    const numTwo = ref(0)
</script>

增减单位

通过属性unit更改数字输入框的增减单位，默认为1

展开代码

<template>
    <vi-num-input v-model="numThree" :unit="0.5"></vi-num-input>
</template>

<script>
    const numThree = ref(0)
</script>

最大最小值

通过属性min与max定义最大最小值

展开代码

<template>
    <vi-num-input v-model="numFour" :min="-10" :max="10"></vi-num-input>
</template>

<script>
    const numFour = ref(0)
</script>

Props

属性名	描述	类型	默认值

可覆写css变量

变量名	描述	默认值