uview-ultra v4

Appearance

NumberBox 步进器 ​

该组件一般用于商城购物选择物品数量的场景

注意：该输入框只能输入大于或等于0的整数

平台差异说明 ​

App（vue）App（nvue）H5小程序
√√√√

基本使用 ​

通过v-model绑定modelValue初始值，此值是双向绑定的，无需在回调中将返回的数值重新赋值给modelValue。

html
<template>
	<up-number-box v-model="value" @change="valChange"></up-number-box>
</template>
js
<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const value = ref(0);  
  
// 定义方法  
function valChange(e) {  
  console.log('当前值为: ' + e.target.value);  
}  
</script>
js
<script>
	export default {
		data() {
			return {
				value: 0
			}
		},
		methods: {
			valChange(e) {
				console.log('当前值为: ' + e.value)
			}
		}
	}
</script>

步长设置 ​

  • 通过step属性设置每次点击增加或减少按钮时变化的值，默认为1，下面示例每次都会加2或者减2
html
<up-number-box :step="2"></up-number-box>

限制输入范围 ​

通过min和max参数限制输的入值最小值和最大值

html
<up-number-box :min="1" :max="100"></up-number-box>

限制只能输入整数 ​

通过integer限制输入类型

html
<up-number-box integer></up-number-box>

禁用 ​

html
<!-- 通过设置`disabled`参数来禁用输入框，禁用状态下无法点击加减按钮或修改输入框的值 -->
<up-number-box :disabled="true"></up-number-box>

<!-- 禁用输入框 -->
<up-number-box :disabledInput="true"></up-number-box>

<!-- 禁用增加按钮 -->
<up-number-box :disablePlus="true"></up-number-box>

<!-- 禁用减少按钮 -->
<up-number-box :disableMinus="true"></up-number-box>

<!-- 禁用长按 -->
<up-number-box :longPress="false"></up-number-box>

固定小数位数 ​

通过step设置步进长度，decimal-length设置显示小数位数

html
<up-number-box step="0.25" decimal-length="1" ></up-number-box>

异步变更 ​

通过asyncChange设置异步变更，开启后需要手动控制输入值 （默认 false ）

html
<template>
    <up-number-box v-model="value" :asyncChange="true" @change="onChange"></up-number-box>
</template>
js
<script setup>  
import { ref, onMounted } from 'vue';  
  
// 创建响应式数据  
const value = ref(1);  
  
// 定义方法  
function onChange(e) {  
  setTimeout(() => {  
    value.value += 1; // 使用 value.value 来访问和修改响应式数据  
  }, 3000);  
}
</script>
js
<script>
export default {
    data(){
        return {
            value:1
        }
    },
    methods:{
        onChange(e){
            setTimeout(() => {
                this.value = this.value + 1;
            }, 3000)
        }
    }
}
</script>

自定义颜色和大小 ​

  • 通过button-size参数设置按钮大小
  • 通过icon-style参数设置加减按钮图标的样式
html
<up-number-box 
    button-size="36"
    color="#ffffff"
    bgColor="#2979ff"
    iconStyle="color: #fff"
></up-number-box>

自定义 slot ​

html
<template>
    <up-number-box v-model="value">
        <template #minus>
            <view
                class="minus"
            >
                <up-icon
                    name="minus"
                    size="12"
                ></up-icon>
            </view>
        </template>
        <template #input>
            <text
                style="width: 50px;text-align: center;"
                class="input"
            >{{value}}</text>
        </template>
        <template #plus>
            <view
                class="plus"
            >
                <up-icon
                    name="plus"
                    color="#FFFFFF"
                    size="12"
                ></up-icon>
            </view>
        </template>
    </up-number-box>
</template>
js
<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const value = ref(1);  
</script>
js
<script>
export default {
    data(){
        return {
            value:1
        }
    }
}
</script>
css
<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--
modelValue用于双向绑定的值，初始化时设置设为默认min值(最小值)String | Number1-
min用户可输入的最小值String | Number1-
max用户可输入的最大值String | NumberNumber.MAX_SAFE_INTEGER-
step步长，每次加或减的值， 支持小数值，如需小数String | Number1-
integer是否只能输入正整数Booleanfalsetrue
disabled是否禁用操作，包括输入框，加减按钮Booleanfalsetrue
disabledInput是否禁止输入框Booleanfalsetrue
asyncChange是否开启异步变更，开启后需要手动控制输入值Booleanfalsetrue
inputWidth输入框宽度，单位pxString | Number35-
showMinus是否显示减少按钮Booleantruefalse
showPlus是否显示增加按钮Booleantruefalse
decimalLength显示的小数位数String | Number--
longPress是否允许长按进行加减Booleantruefalse
color输入框文字和加减按钮图标的颜色String#323233-
buttonSize按钮大小，宽高等于此值，单位px，输入框高度和此值保持一致String | Number30-
bgColor输入框和按钮的背景颜色String#EBECEE-
cursorSpacing指定光标于键盘的距离，避免键盘遮挡输入框，单位pxString | Number100-
disablePlus是否禁用增加按钮Booleanfalsetrue
disableMinus是否禁用减少按钮Booleanfalsetrue
iconStyle加减按钮图标的样式String--

Events ​

事件名说明回调参数
focus输入框得到焦点触发(按钮可点击情况下)，对象形式value：输入框当前值，name：步进器标识符
blur输入框失去焦点时触发，对象形式value：输入框当前值，name：步进器标识符
change输入框内容发生变化时触发，对象形式value：输入框当前值，name：步进器标识符
overlimit超过范围阈值时触发type：（minus已达最小值，plus已达最大值）

Slots ​

名称说明
minus减少按钮
input输入框
plus增加按钮