uniApp focus的坑(解决)

• 需求：实现光标的跳转
• 问题1：uniApp不支持自定义指令,因此无法使用v-focus
• 问题2：通过改变focus属性无反应
• 进阶：提取获取焦点的公共方法
  

结构

<view class="focus">
		<view class="item">
			<p>first:</p>
			<input type="text" :focus="firstFocus" @confirm="firstConfirm"/>
		</view>
		<view class="item">
			<p>second:</p>
			<input type="text" :focus="secondFocus" @confirm="secondConfirm"/>
		</view>
</view>

data

data() {
	return {
		firstFocus:true,   // 控制第一个焦点，默认聚焦
		secondFocus:false,  // 控制第二个焦点
	}
},

实现

methods:{
		// 跳到第二个
		firstConfirm(){
			this.getFocus('secondFocus')
		},
		
		// 跳到第一个
		secondConfirm(){
			this.getFocus('firstFocus')
		},

	    // 获取焦点
		getFocus(nextfocus){
			this[nextfocus] = false     // 不能使用点语法
			this.$nextTick(()=>{
				this[nextfocus] = true
			})
		},
}

效果