From 3b03f87a02458f719e2eb4bf112a13441b427d14 Mon Sep 17 00:00:00 2001
From: ‘chensiAb’ <‘chenchenco03@163.com’>
Date: Tue, 25 Mar 2025 13:54:34 +0800
Subject: [PATCH] Merge branch 'master' of ssh://dev.zhiheiot.com:29418/mob-components
---
forms/form/CForm.vue | 83 +++++++++++++++++++++++++++++------------
1 files changed, 59 insertions(+), 24 deletions(-)
diff --git a/forms/form/CForm.vue b/forms/form/CForm.vue
index 8789128..7245951 100644
--- a/forms/form/CForm.vue
+++ b/forms/form/CForm.vue
@@ -1,10 +1,16 @@
/**
* CForm - 表单套装组件，套件的主体
+ * 表单容器组件，用于管理表单数据、处理表单验证和提交
+ * 支持自动滚动到错误位置，提供表单项变化回调和表单完成回调
+ * 提供手动提交、预验证和错误设置等功能
* @author Tevin
*/
<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 +38,7 @@
<script>
import Taro from '@tarojs/taro';
+import { $ } from '@tarojs/extend';
import './cForm.scss';
export default {
@@ -58,7 +65,8 @@
formData: this.formData,
},
validators: {},
- scrollTop: '',
+ scrollTop: 0,
+ offsetTop: 0,
};
},
methods: {
@@ -79,13 +87,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 +121,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 +141,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 +201,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 = {};
--
Gitblit v1.9.1