Uniapp踩坑 -- $ref无法使用,如何手动获取input焦点

起因是做一个表单验证,希望失去焦点的时候,验证输入的正确性,如果输入格式不规范则弹出错误提示并获取焦点,然而却被各种报错折磨了一个小时

首次尝试,使用$event.target获取dom元素

@blur="dataExamine($event.target)"

e.focus()

报错提示

第二次尝试,使用vue的$ref

<input ref="input" @blur="dataExamine()"></input>

this.$refs.input.focus()

依旧报错

 网络查询后得知uniapp的ref属性不能用在uniapp的内置组件上面，只能用在自定义组件上面

第三次尝试,使用document.getElementById

相同的报错原因,找不到focus()这个函数

再次查询网络,发现微信小程序无法使用document,只能通过下列形式获取

const query = uni.createSelectorQuery().in(this);
query.select('#id')

然而通过该方法获取dom元素依旧无法使用focus()方法

最后解决,使用uniapp自带的自动获取焦点

经过网络搜索,没有找到什么简单实现的方法,无奈只能把自动变成手动

<input :focus="focusState" @blur="dataExamine()"></input>

data()里

focusState: true,

在失去焦点的时候,将focusState设为false,在需要获取的的时候再设为true

dataExamine() {
		this.focusState = false
		let daysIsNotEmpty = uni.$utils.verification.isNotEmpty(this.banDays)
		let daysIsCorrect = this.banDays !== 0 && 
!/^0/.test(this.banDays) && Number.isInteger(this.banDays)
		if (!daysIsNotEmpty || !daysIsCorrect) {
			this.$nextTick(() => {
				this.focusState = true
			})
		}
}

最终实现获取焦点

总结

1. uniapp 的内置组件不能使用$ref

2. uniapp 不能使用document