ZXUI

<template>
	<zx-number-box v-model="value" @change="valChange"></zx-number-box>
</template>

<script>
	export default {
		data() {
			return {
				value: 0
			}
		},
		methods: {
			valChange(e) {
				console.log('当前值为: ' + e.value)
			}
		}
	}
</script>

<zx-number-box :step="2"></zx-number-box>

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

<zx-number-box integer></zx-number-box>

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

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

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

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

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

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

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

<script>
export default {
    data(){
        return {
            value:1
        }
    },
    methods:{
        onChange(e){
            setTimeout(() => {
                this.value = this.value + 1;
            }, 3000)
        }
    }
}
</script>

<zx-number-box 
    button-size="36"
    color="#ffffff"
    bgColor="#2979ff"
    iconStyle="color: #fff"
></zx-number-box>

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