优化单选式开关在h5页面上的表现

Tevin

2024-07-02 0dc0b818c2e88ee54dc2c0db0a2aab1436a7b476

 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,13 +84,13 @@
                    // 第一个不通过项提示
                    if (!validation.passed) {
                        if (this.autoScrollToError === 'on') {
                            this.scrollTop = validation.offset.top;
                            this.scrollTop = validation.offset.top - this.offsetTop;
                        }
                        Taro.showToast({
                            title: validation.msg,
                            icon: 'none',
                            mask: false,
                            duration: 2000,
                            duration: validation.msg.length < 16 ? 2000 : 3000,
                        });
                        return;
                    }
@@ -113,13 +118,13 @@
                    // 第一个不通过项提示
                    if (!validation.passed) {
                        if (this.autoScrollToError === 'on') {
                            this.scrollTop = validation.offset.top;
                            this.scrollTop = validation.offset.top - this.offsetTop;
                        }
                        Taro.showToast({
                            title: validation.msg,
                            icon: 'none',
                            mask: false,
                            duration: 2000,
                            duration: validation.msg.length < 16 ? 2000 : 3000,
                        });
                        // 检查失败
                        callback && callback(false);
@@ -133,30 +138,47 @@
        // 直接设定错误
        $setErrors(errors) {
            const checklist = [];
            errors.forEach(errorItem => {
                if (typeof this.validators[errorItem.key] !== 'undefined') {
            const unchecks = [];
            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])
                    );
                } else {
                    unchecks.push(errors[errorKey]);
                }
            });
            Promise.all(checklist).then(validations => {
                for (let validation of validations) {
                    // 第一个不通过项提示
                    if (!validation.passed) {
                        if (this.autoScrollToError === 'on') {
                            this.scrollTop = validation.offset.top;
            if (checklist.length > 0) {
                Promise.all(checklist).then(validations => {
                    for (let validation of validations) {
                        // 第一个不通过项提示
                        if (!validation.passed) {
                            if (this.autoScrollToError === 'on') {
                                this.scrollTop = validation.offset.top - this.offsetTop;
                            }
                            Taro.showToast({
                                title: validation.msg,
                                icon: 'none',
                                mask: false,
                                duration: validation.msg.length < 16 ? 2000 : 3000,
                            });
                            return;
                        }
                        Taro.showToast({
                            title: validation.msg,
                            icon: 'none',
                            mask: false,
                            duration: 2000,
                        });
                        return;
                    }
                }
            });
                });
            } else if (unchecks.length > 0) {
                Taro.showToast({
                    title: unchecks[0],
                    icon: 'none',
                    mask: false,
                    duration: unchecks[0] < 16 ? 2000 : 3000,
                });
            }
        },
        $setScrollTop(top) {
            if (this.autoScrollToError === 'on') {
                this.scrollTop = top;
            }
        },
    },
    mounted() {
@@ -176,6 +198,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 = {};