优化表单错误滚动

Tevin

2023-11-17 9ad36122bbb009f9a55c1143b50d318851532c5a

 forms/form/CForm.vue

@@ -4,7 +4,10 @@
 */

<template>
    <view :class="'c-form-outer ' + (autoScrollToError==='on'?'auto-scroll':'')">
    <view
        :class="'c-form-outer ' + (autoScrollToError==='on'?'auto-scroll':'')"
        ref="formOuter"
    >
        <form
            class="c-form"
            v-if="autoScrollToError==='off'"
@@ -32,6 +35,7 @@

<script>
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
import './cForm.scss';

export default {
@@ -58,7 +62,8 @@
                formData: this.formData,
            },
            validators: {},
            scrollTop: '',
            scrollTop: 0,
            offsetTop: 0,
        };
    },
    methods: {
@@ -79,7 +84,7 @@
                    // 第一个不通过项提示
                    if (!validation.passed) {
                        if (this.autoScrollToError === 'on') {
                            this.scrollTop = validation.offset.top;
                            this.scrollTop = validation.offset.top - this.offsetTop;
                        }
                        Taro.showToast({
                            title: validation.msg,
@@ -113,7 +118,7 @@
                    // 第一个不通过项提示
                    if (!validation.passed) {
                        if (this.autoScrollToError === 'on') {
                            this.scrollTop = validation.offset.top;
                            this.scrollTop = validation.offset.top - this.offsetTop;
                        }
                        Taro.showToast({
                            title: validation.msg,
@@ -133,10 +138,10 @@
        // 直接设定错误
        $setErrors(errors) {
            const checklist = [];
            errors.forEach(errorItem => {
                if (typeof this.validators[errorItem.key] !== 'undefined') {
            Object.keys(errors).forEach(errorKey => {
                if (typeof this.validators[errorKey] !== 'undefined') {
                    checklist.push(
                        this.validators[errorItem.key]('setError', errorItem.msg)
                        this.validators[errorKey]('setError', errors[errorKey])
                    );
                }
            });
@@ -145,7 +150,7 @@
                    // 第一个不通过项提示
                    if (!validation.passed) {
                        if (this.autoScrollToError === 'on') {
                            this.scrollTop = validation.offset.top;
                            this.scrollTop = validation.offset.top - this.offsetTop;
                        }
                        Taro.showToast({
                            title: validation.msg,
@@ -176,6 +181,16 @@
        this.formRes.$regItemValidator = (name, cb) => {
            this.validators[name] = cb;
        };
        // 表单滚动偏移
        if (this.autoScrollToError === 'on') {
            setTimeout(() => {
                $(this.$refs.formOuter)
                    .offset()
                    .then(offset => {
                        this.offsetTop = offset.top + 10;
                    });
            }, 10);
        }
    },
    beforeDestroy() {
        this.validators = {};