<template>
	<un-number-box v-model="value" @change="onChange"></un-number-box>
</template>

<script setup lang="uts">
import { ref } from 'vue'
import type { UnNumberBoxChangeEvent } from '@/uni_modules/uview-unix/components/un-number-box'

const value = ref<number>(0)

const onChange = (e: UnNumberBoxChangeEvent) => {
	console.log('当前值为:', e.value)
	console.log('组件标识符:', e.name)
}
</script>
✅ Copy success!
copy

<un-number-box :step="2"></un-number-box>
✅ Copy success!
copy

<un-number-box :min="1" :max="100"></un-number-box>
✅ Copy success!
copy

<un-number-box integer></un-number-box>
✅ Copy success!
copy

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

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

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

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

<!-- 禁用长按 -->
<un-number-box :longPress="false"></un-number-box>
✅ Copy success!
copy

<un-number-box step="0.25" decimal-length="1"></un-number-box>
✅ Copy success!
copy

<template>
    <un-number-box v-model="value" :asyncChange="true" @change="onChange"></un-number-box>
</template>

<script setup lang="uts">
import { ref } from 'vue'
import type { UnNumberBoxChangeEvent } from '@/uni_modules/uview-unix/components/un-number-box'

const value = ref<number>(1)
const asyncChange = ref<boolean>(true)

const onChange = (e: UnNumberBoxChangeEvent) => {
    asyncChange.value = false
    uni.showLoading({
        title: '正在加载'
    })
    setTimeout(() => {
        uni.hideLoading()
        value.value = e.value
        asyncChange.value = true
    }, 3000)
}
</script>
✅ Copy success!
copy

<un-number-box 
    button-size="36"
    color="#ffffff"
    bgColor="#2979ff"
    iconStyle="color: #fff"
></un-number-box>
✅ Copy success!
copy

<template>
    <un-number-box v-model="value">
        <view
            slot="minus"
            class="minus"
        >
            <un-icon
                name="minus"
                size="12"
            ></un-icon>
        </view>
        <text
            slot="input"
            style="width: 50px;text-align: center;"
            class="input"
        >{{value}}</text>
        <view
            slot="plus"
            class="plus"
        >
            <un-icon
                name="plus"
                color="#FFFFFF"
                size="12"
            ></un-icon>
        </view>
    </un-number-box>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const value = ref<number>(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;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .input {
        padding: 0 10px;
    }

    .plus {
        width: 22px;
        height: 22px;
        background-color: #FF0000;
        border-radius: 100px;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        justify-content: center;
        align-items: center;
    }
</style>
✅ Copy success!
copy