vant的field组件autofocus属性只生效一次

vant的field组件autofocus属性只生效一次

问题描述

<van-field
  autofocus
  ref="fieldPhone"
  name="phone"
  v-model="form.phone"
  label="手机号码"
  placeholder="手机号码"
  :rules="[{ required: true, message: '请输入手机号码' }]"
/>

使用van-field的autofocus属性，只在第一次进入页面时能成功focus

解决方法

不使用autofocus，改为页面mounted或弹框显示时手动调用van-field提供的focus方法

this.$nextTick(() => {
  this.$refs.fieldPhone.focus();
});