目录
基本使用
#步长设置
#限制输入范围
#限制只能输入整数
#禁用
#固定小数位数
#异步变更
#自定义颜色和大小
#自定义 slot
API
#Props
#Events
#Slots
基本使用
通过v-model绑定value初始值，此值是双向绑定的，无需在回调中将返回的数值重新赋值给value。
<template>
<u-number-box v-model="value" @change="valChange"></u-number-box>
</template>
<script>
export default {
data() {
return {
value: 0
}
},
methods: {
valChange(e) {
console.log('当前值为: ' + e.value)
}
}
}
</script>
#步长设置
- 通过
step属性设置每次点击增加或减少按钮时变化的值，默认为1，下面示例每次都会加2或者减2
<u-number-box :step="2"></u-number-box>
#限制输入范围
通过min和max参数限制输的入值最小值和最大值
<u-number-box :min="1" :max="100"></u-number-box>
#限制只能输入整数
通过integer限制输入类型
<u-number-box integer></u-number-box>
#禁用
<!-- 通过设置`disabled`参数来禁用输入框，禁用状态下无法点击加减按钮或修改输入框的值 -->
<u-number-box :disabled="true"></u-number-box>
<!-- 禁用输入框 -->
<u-number-box :disabledInput="true"></u-number-box>
<!-- 禁用增加按钮 -->
<u-number-box :disablePlus="true"></u-number-box>
<!-- 禁用减少按钮 -->
<u-number-box :disableMinus="true"></u-number-box>
<!-- 禁用长按 -->
<u-number-box :longPress="false"></u-number-box>
#固定小数位数
通过step设置步进长度，decimal-length设置显示小数位数文章来源：https://www.toymoban.com/news/detail-776524.html
<u-number-box step="0.25" decimal-length="1" ></u-number-box>
#异步变更
通过asyncChange设置异步变更，开启后需要手动控制输入值 （默认 false ）文章来源地址https://www.toymoban.com/news/detail-776524.html
<template>
<u-number-box v-model="value" :asyncChange="true" @change="onChange"></u-number-box>
</template>
<script>
export default {
data(){
return {
value:1
}
},
methods:{
onChange(e){
setTimeout(() => {
this.value = this.value + 1;
}, 3000)
}
}
}
</script>
#自定义颜色和大小
- 通过
button-size参数设置按钮大小 - 通过
icon-style参数设置加减按钮图标的样式
<u-number-box
button-size="36"
color="#ffffff"
bgColor="#2979ff"
iconStyle="color: #fff"
></u-number-box>
#自定义 slot
<template>
<u-number-box v-model="value">
<view
slot="minus"
class="minus"
>
<u-icon
name="minus"
size="12"
></u-icon>
</view>
<text
slot="input"
style="width: 50px;text-align: center;"
class="input"
>{{value}}</text>
<view
slot="plus"
class="plus"
>
<u-icon
name="plus"
color="#FFFFFF"
size="12"
></u-icon>
</view>
</u-number-box>
</template>
<script>
export default {
data(){
return {
value:1
}
}
}
</script>
<style lang="scss">
.minus {
width: 22px;
height: 22px;
border-width: 1px;
border-color: #E6E6E6;
border-style: solid;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
@include flex;
justify-content: center;
align-items: center;
}
.input {
padding: 0 10px;
}
.plus {
width: 22px;
height: 22px;
background-color: #FF0000;
border-radius: 50%;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
}
</style>API
#Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| name | 步进器标识符，在change回调返回 | String | Number | - | - |
| value | 用于双向绑定的值，初始化时设置设为默认min值(最小值) | String | Number | 1 | - |
| min | 用户可输入的最小值 | String | Number | 1 | - |
| max | 用户可输入的最大值 | String | Number | Number.MAX_SAFE_INTEGER |
- |
| step | 步长，每次加或减的值， 支持小数值，如需小数 | String | Number | 1 | - |
| integer | 是否只能输入正整数 | Boolean | false | true |
| disabled | 是否禁用操作，包括输入框，加减按钮 | Boolean | false | true |
| disabledInput | 是否禁止输入框 | Boolean | false | true |
| asyncChange | 是否开启异步变更，开启后需要手动控制输入值 | Boolean | false | true |
| inputWidth | 输入框宽度，单位px | String | Number | 35 | - |
| showMinus | 是否显示减少按钮 | Boolean | true | false |
| showPlus | 是否显示增加按钮 | Boolean | true | false |
| decimalLength | 显示的小数位数 | String | Number | - | - |
| longPress | 是否允许长按进行加减 | Boolean | true | false |
| color | 输入框文字和加减按钮图标的颜色 | String | #323233 | - |
| buttonSize | 按钮大小，宽高等于此值，单位px，输入框高度和此值保持一致 | String | Number | 30 | - |
| bgColor | 输入框和按钮的背景颜色 | String | #EBECEE | - |
| cursorSpacing | 指定光标于键盘的距离，避免键盘遮挡输入框，单位px | String | Number | 100 | - |
| disablePlus | 是否禁用增加按钮 | Boolean | false | true |
| disableMinus | 是否禁用减少按钮 | Boolean | false | true |
| iconStyle | 加减按钮图标的样式 | String | - | - |
#Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| focus | 输入框得到焦点触发(按钮可点击情况下)，对象形式 | value：输入框当前值，name：步进器标识符 |
| blur | 输入框失去焦点时触发，对象形式 | value：输入框当前值，name：步进器标识符 |
| change | 输入框内容发生变化时触发，对象形式 | value：输入框当前值，name：步进器标识符 |
| overlimit | 超过范围阈值时触发 | type：（minus已达最小值，plus已达最大值） |
#Slots
| 名称 | 说明 |
|---|---|
| minus | 减少按钮 |
| input | 输入框 |
| plus | 增加按钮 |
到了这里，关于uniapp中组件库的丰富NumberBox 步进器的用法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
