记录Vant中 scrollToField的使用

我们在使用vant-ui的form表单时，期望校验错误时能及时滚动到第一个错误的位置，这样便可提升用户体验，在v2.8.3版本后，Vant-ui提供了这样一个API:scrollToField，如下代码

<template>
  //1. 需要在在van-form上添加ref属性，方便后面调用
  //2. 每个组件，比如 van-field需要添加name属性，必须要英文
	<van-form ref="form" @submit="onSubmit" @onFailed="onFailed">
	  <van-field
	    v-model="username"
	    name="username"
	    label="用户名"
	    placeholder="用户名"
	    :rules="[{ required: true, message: '请填写用户名' }]"
	  />
	  <van-field
	    v-model="password"
	    type="password"
	    name="password"
	    label="密码"
	    placeholder="密码"
	    :rules="[{ required: true, message: '请填写密码' }]"
	  />
	  <div style="margin: 16px;">
	    <van-button round block type="info" native-type="submit">提交</van-button>
	  </div>
	</van-form>
</template>
<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      value1: '',
      value2: '',
      value3: '',
      pattern: /\d{6}/,
    };
  },
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return /1\d{10}/.test(val);
    },
    // 异步校验函数返回 Promise
    asyncValidator(val) {
      return new Promise((resolve) => {
        Toast.loading('验证中...');

        setTimeout(() => {
          Toast.clear();
          resolve(/\d{6}/.test(val));
        }, 1000);
      });
    },
    onFailed(failed) {
      const errors = failed.errors
      this.$refs.form.scrollToField(errors[0].name, true)
    },
  },
};
</script>