Tuniao UI Uniapp V3TnNumberBox-步进器
该组件一般用于商城购物选择物品数量、购物车数量控制的场景
警告
该输入框只能输入大于或等于 0 的数值
组件位置
typescript
import TnNumberBox from '@tuniao/tnui-vue3-uniapp/components/number-box/src/number-box.vue'import TnNumberBox from '@tuniao/tnui-vue3-uniapp/components/number-box/src/number-box.vue'typescript
import TnNumberBox from '@/uni_modules/tuniaoui-vue3/components/number-box/src/number-box.vue'import TnNumberBox from '@/uni_modules/tuniaoui-vue3/components/number-box/src/number-box.vue'平台差异说明
| App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
|---|---|---|---|---|
| √ | √ | √ | √ | 适配中 |
基本使用
- 通过
v-model绑定步进器的值 - 通过
disabled禁止步进器的使用 - 通过
input-disabled禁止步进器输入数值，仅可以通过加减按钮进行操作
vue
<script lang="ts" setup>
import { ref } from 'vue'
const numberValue = ref<number>(0)
</script>
<template>
<TnNumberBox v-model="numberValue" />
<!-- 禁止操作 -->
<TnNumberBox v-model="numberValue" disabled />
<!-- 禁止输入框输入 -->
<TnNumberBox v-model="numberValue" input-disabled />
</template><script lang="ts" setup>
import { ref } from 'vue'
const numberValue = ref<number>(0)
</script>
<template>
<TnNumberBox v-model="numberValue" />
<!-- 禁止操作 -->
<TnNumberBox v-model="numberValue" disabled />
<!-- 禁止输入框输入 -->
<TnNumberBox v-model="numberValue" input-disabled />
</template>修改步进器的样式
- 通过
size修改步进器的尺寸，可选值sm、lg - 通过
bg-color和text-color的值修改步进器的背景颜色和字体颜色，可以传递hex、rgb、rgba和图鸟内置颜色的值背景颜色 \ 字体颜色 - 通过
width和height修改组件的宽高，默认单位为 rpx，可以传递带单位的字符串 - 通过
font-size修改字体大小，默认单位为 rpx，可以传递带单位的字符串
vue
<script lang="ts" setup>
import { ref } from 'vue'
const numberValue = ref<number>(0)
</script>
<template>
<!-- 使用内置尺寸 -->
<TnNumberBox v-model="numberValue" />
<!-- 自定义尺寸 -->
<TnNumberBox v-model="numberValue" width="300" height="80" font-size="40" />
<!-- 自定义组件颜色 -->
<TnNumberBox
v-model="numberValue"
bg-color="tn-grey-light"
text-color="#01BEFF"
/>
</template><script lang="ts" setup>
import { ref } from 'vue'
const numberValue = ref<number>(0)
</script>
<template>
<!-- 使用内置尺寸 -->
<TnNumberBox v-model="numberValue" />
<!-- 自定义尺寸 -->
<TnNumberBox v-model="numberValue" width="300" height="80" font-size="40" />
<!-- 自定义组件颜色 -->
<TnNumberBox
v-model="numberValue"
bg-color="tn-grey-light"
text-color="#01BEFF"
/>
</template>修改步进器的步进值、最小、最大值
- 通过
step可以设置步进器的步进值，默认值为1 - 通过
max和min设置步进器的最大、最小值，默认值为[0 ～ 100]
vue
<script lang="ts" setup>
import { ref } from 'vue'
const numberValue = ref<number>(0)
</script>
<template>
<!-- 设置步进值为0.1，最小值为10，最大值为20 -->
<TnNumberBox v-model="numberValue" :step="0.1" :min="10" :max="20" />
</template><script lang="ts" setup>
import { ref } from 'vue'
const numberValue = ref<number>(0)
</script>
<template>
<!-- 设置步进值为0.1，最小值为10，最大值为20 -->
<TnNumberBox v-model="numberValue" :step="0.1" :min="10" :max="20" />
</template>API
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| model-value/v-model | 步进器绑定的值 | Number | - | |
| size | 步进器的尺寸 | String | - | sm / lg |
| width | 步进器宽度，默认单位为 rpx，可以传入带单位的尺寸值 | String | Number | - | - |
| height | 步进器高度，默认单位为 rpx，可以传入带单位的尺寸值 | String | Number | - | - |
| font-size | 步进器字体大小，默认单位为 rpx，可以传入带单位的尺寸值 | String | Number | - | - |
| bg-color | 步进器背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba | String | - | - |
| text-color | 步进器字体颜色，可以使用图鸟内置的背景色、hex、rgb、rgba | String | - | - |
| min | 步进器最小值 | Number | 0 | - |
| max | 步进器最大值 | Number | 100 | - |
| step | 步进器步进值 | Number | 1 | - |
| disabled | 禁止操作步进器 | Boolean | false | true |
| input-disabled | 禁止步进器输入 | Boolean | false | true |
| input-spacing | 输入框与键盘的间距，单位px | Number | 20 | - |
| long-press | 长按递增减 | Boolean | true | false |
| long-press-interval | 长按递增减的间隔时间，单位ms | Number | 250 | - |
| validate-event | 值发生修改时是否触发表单验证 | Boolean | true | false |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 步进值发生变化时的回调函数 | (value: number) => void |
| input | 步进值输入的值发生变化时的回调函数 | (value: number) => void |
Slots
| 插槽名 | 说明 |
|---|---|
| minus | 步进器减按钮的内容 |
| plus | 步进器加按钮的内容 |