该组件一般用于商城购物选择物品数量的场景
注意：该输入框只能输入大于或等于0的整数
# 平台差异说明
App（vue）App（nvue）H5小程序√√√√
# 基本使用
通过 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设置显示小数位数
<u-number-box step="0.25" decimal-length="1"></u-number-box>
# 异步变更
通过 asyncChange设置异步变更，开启后需要手动控制输入值 （默认 false ）
<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-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>
# 此页面源代码地址
页面源码地址
正在上传…重新上传取消 github 正在上传…重新上传取消 gitee
# API
# Props
参数说明类型默认值可选值name步进器标识符，在change回调返回String | Number–value用于双向绑定的值，初始化时设置设为默认min值(最小值)String | Number1-min用户可输入的最小值String | Number1-max用户可输入的最大值String | Number Number.MAX_SAFE_INTEGER
-step步长，每次加或减的值， 支持小数值，如需小数String | Number1-integer是否只能输入正整数Booleanfalsetruedisabled是否禁用操作，包括输入框，加减按钮BooleanfalsetruedisabledInput是否禁止输入框BooleanfalsetrueasyncChange是否开启异步变更，开启后需要手动控制输入值BooleanfalsetrueinputWidth输入框宽度，单位pxString | Number35-showMinus是否显示减少按钮BooleantruefalseshowPlus是否显示增加按钮BooleantruefalsedecimalLength显示的小数位数String | Number–longPress是否允许长按进行加减Booleantruefalsecolor输入框文字和加减按钮图标的颜色String#323233-buttonSize按钮大小，宽高等于此值，单位px，输入框高度和此值保持一致String | Number30-bgColor输入框和按钮的背景颜色String#EBECEE-cursorSpacing指定光标于键盘的距离，避免键盘遮挡输入框，单位pxString | Number100-disablePlus是否禁用增加按钮BooleanfalsetruedisableMinus是否禁用减少按钮BooleanfalsetrueiconStyle加减按钮图标的样式String–
# Events
事件名说明回调参数focus输入框得到焦点触发(按钮可点击情况下)，对象形式value：输入框当前值，name：步进器标识符blur输入框失去焦点时触发，对象形式value：输入框当前值，name：步进器标识符change输入框内容发生变化时触发，对象形式value：输入框当前值，name：步进器标识符overlimit超过范围阈值时触发type：（ minus
已达最小值， plus
已达最大值）
# Slots
名称说明minus减少按钮input输入框plus增加按钮
Original: https://blog.csdn.net/m0_46461853/article/details/126959665
Author: 鹿蹊zz
Title: NumberBox 步进器
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/542859/
转载文章受原作者版权保护。转载请注明原作者出处！