[uniapp] Cómo enfocar manualmente el cuadro de texto de entrada

Encontré un problema durante el desarrollo. Espero que el cuadro de texto de entrada se pueda enfocar automáticamente después de completar cada página de operación. Luego viene el problema, ¿qué debo hacer? Continúe leyendo.

Quizá la mayoría de los alumnos hagan esto, han intentado modificar las propiedades de la caja de texto focus, truepero no tiene efecto, la referencia es la siguiente

<template>
	<view class="content">
		<!-- 此处省略... -->
		<view class="expand">
			<input class="input" type="text" v-model="value" focus="true"/>
		</view>
		<!-- 此处省略... -->
	</view>
</template>

Intente implementarlo manualmente, llame al evento de enfoque y piense que no es como el proyecto h5 anterior. No hay forma de manipular el dom, por lo que se archiva temporalmente y la solución que se encuentra en Internet no es adecuada.

Parece que solo puedo resolverlo por mí mismo. Permítanme aclarar mi pensamiento primero y conocer el estado del foco. Si parece incorrecto establecer directamente la propiedad focuspara que siempre sea , intente configurar la actualización de estado. Consulte lo siguientetrue

<template>
	<view class="content">
		<!-- 此处省略... -->
		<view class="expand">
			<input class="input" type="text" v-model="value" :focus="isInputFocus" @blur="onblur"/>
		</view>
		<!-- 此处省略... -->
	</view>
</template>

¿Lo has encontrado? En el componente de cuadro de entrada de entrada , configure la focusvariable de atributo isInputFocuspara que sea actualizable y luego agregue un método de atributoonblur()

Esto debe hacerse. Cuando el cuadro de entrada pierde el foco, debe llamar a un método para actualizar el estado. Consulte el siguiente código

export default {
    
    
		data() {
    
    
			return {
    
    
				//...
				value:'',
				isInputFocus:true,
			};
		},
		methods:{
    
    
			onblur(){
    
    
				this.isInputFocus=false;
			},
			//...
		}
	}

Cuando se complete la operación, configure manualmente el foco del cuadro de entrada y ejecute el código de la siguiente manera. ¡No crea que se puede usar así!

this.$nextTick(()=>{
    
    
	this.value='';
	this.isInputFocus=true;
})