Paso a paso de NumberBox

Este componente se usa generalmente en la escena de compras en el centro comercial para seleccionar la cantidad de artículos.

Nota: Este cuadro de entrada solo puede ingresar números enteros mayores o iguales a 0

# Descripción de la diferencia de plataforma

aplicación (ver)	Aplicación (nvue)	H5	Applets
√	√	√	√

#Uso básico

Al v-modelvincular valueel valor inicial, este valor está vinculado en dos direcciones y no es necesario reasignarle el valor devuelto en la devolución de llamada 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>

# configuración de tamaño de paso

Establezca el valor que cambia cada vez que se hace clic en el botón de aumentar o disminuir a través stepdel atributo, el valor predeterminado es 1, el siguiente ejemplo sumará o restará 2 cada vez

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

# Limitar el rango de entrada

Limite el valor de entrada valores mínimos y máximos ingresados por miny parámetrosmax

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

#Restringir solo se pueden ingresar números enteros

Restringiendo integerel tipo de entrada

<u-number-box integer></u-number-box>

# deshabilitar

<!-- 通过设置`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>

#Número fijo de decimales

Al stepconfigurar la longitud del paso, decimal-lengthestablezca el número de decimales que se muestran

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

# cambio asincrónico

Al asyncChangeconfigurar el cambio asincrónico, debe controlar manualmente el valor de entrada después de activarlo (falso predeterminado)

<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>

#color y tamaño personalizados

button-sizeEstablecer el tamaño del botón por parámetro
icon-styleEstablezca el estilo de los íconos de los botones más y menos a través de parámetros

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

#ranura personalizada

<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>

# Dirección del código fuente de esta página

Dirección de origen de la página

Subiendo...volver a cargar cancelar github Subiendo...volver a cargar cancelar gitee

#API _

# Accesorios

parámetro	ilustrar	tipo	Valores predeterminados	valor opcional
nombre	El identificador del paso a paso, devuelto en la devolución de llamada de cambio.	Cadena \| Número	-	-
valor	El valor utilizado para el enlace bidireccional, establecido en el valor mínimo predeterminado (valor mínimo) durante la inicialización.	Cadena \| Número	1	-
mín.	El valor mínimo que el usuario puede ingresar.	Cadena \| Número	1	-
máximo	El valor máximo que puede ingresar el usuario.	Cadena \| Número	`Number.MAX_SAFE_INTEGER`	-
paso	El tamaño del paso, el valor agregado o restado cada vez, admite valores decimales, si se requieren decimales	Cadena \| Número	1	-
entero	Si solo se pueden ingresar números enteros positivos	Booleano	FALSO	verdadero
desactivado	Si se deshabilitan las operaciones, incluidos los cuadros de entrada y los botones más y menos	Booleano	FALSO	verdadero
deshabilitadoEntrada	Ya sea para prohibir el cuadro de entrada	Booleano	FALSO	verdadero
asíncronoCambiar	Ya sea para habilitar el cambio asincrónico, después de habilitarlo, debe controlar manualmente el valor de entrada	Booleano	FALSO	verdadero
ancho de entrada	Ancho del cuadro de entrada, unidad px	Cadena \| Número	35	-
mostrarMenos	Ya sea para mostrar el botón de disminución	Booleano	verdadero	FALSO
mostrarMás	Ya sea para mostrar el botón Agregar	Booleano	verdadero	FALSO
longitud decimal	número de decimales a mostrar	Cadena \| Número	-	-
pulsación larga	Si se debe permitir una pulsación larga para sumar y restar	Booleano	verdadero	FALSO
color	El color del texto del cuadro de entrada y los íconos de los botones más y menos	Cadena	#323233	-
botónTamaño	El tamaño, el ancho y el alto del botón son iguales a este valor, unidad px, el alto del cuadro de entrada es consistente con este valor	Cadena \| Número	30	-
bgColor	El color de fondo de los cuadros de entrada y los botones.	Cadena	#EBECEE	-
cursorEspaciado	Especifique la distancia entre el cursor y el teclado para evitar que el teclado cubra el cuadro de entrada, la unidad es px	Cadena \| Número	100	-
desactivarMás	Si se debe deshabilitar el botón Agregar	Booleano	FALSO	verdadero
desactivarMenos	Si se debe desactivar el botón de disminución	Booleano	FALSO	verdadero
iconoEstilo	El estilo de los iconos de los botones más y menos.	Cadena	-	-

# Eventos

nombre del evento	ilustrar	parámetro de devolución de llamada
enfocar	El cuadro de entrada se activa mediante el foco (cuando se puede hacer clic en el botón), en forma de objeto	valor: el valor actual del cuadro de entrada, nombre: el identificador del paso a paso
difuminar	Se activa cuando el cuadro de entrada pierde el foco, en forma de objeto	valor: el valor actual del cuadro de entrada, nombre: el identificador del paso a paso
cambiar	Se activa cuando el contenido del cuadro de entrada cambia, en forma de objeto	valor: el valor actual del cuadro de entrada, nombre: el identificador del paso a paso
sobre el limite	Se activa cuando se excede el umbral de rango	tipo: ( `minus`valor mínimo alcanzado, `plus`valor máximo alcanzado)

# Ranuras

nombre	ilustrar
menos	botón reducir
aporte	Cuadro de entrada
más	botón agregar