From 115043231dbc0606436511133a31be03f8736d44 Mon Sep 17 00:00:00 2001 From: Tevin <tingquanren@163.com> Date: Mon, 18 Oct 2021 11:34:32 +0800 Subject: [PATCH] 调整按钮默认颜色 --- forms/form/CForm.vue | 69 +++++++++++++++++++++++++++++----- 1 files changed, 59 insertions(+), 10 deletions(-) diff --git a/forms/form/CForm.vue b/forms/form/CForm.vue index 365fcac..8e42097 100644 --- a/forms/form/CForm.vue +++ b/forms/form/CForm.vue @@ -1,5 +1,5 @@ /** - * CForm + * CForm - 表单套装组件,套件的主体 * @author Tevin */ @@ -8,7 +8,7 @@ class="c-form" @submit="evt=>handleSubmit()" > - <slot :formData="formData" /> + <slot :formRes="formRes" /> </form> </template> @@ -19,28 +19,42 @@ export default { name: 'CForm', props: { + // 表单数据主体 formData: Object, + // 表单项变化的回调 + // 回调传参只有单项数据 onChange: Function, + // 表单完成的回调 + // 提交且通过表单验证后调用,不通过验证不调用 + // 回调传参包含整个表单数据 onFinish: Function, }, data() { return { + formRes: { + formData: this.formData, + }, validators: {}, }; }, methods: { handleSubmit() { const checklist = []; - Object.keys(this.validators).forEach((key) => { - checklist.push(this.validators[key]()); + // 所有项验证 + Object.keys(this.validators).forEach(key => { + // 仍有效的验证器 + if (this.validators[key]) { + checklist.push(this.validators[key]()); + } }); - Promise.all(checklist).then((validations) => { + Promise.all(checklist).then(validations => { for (let validation of validations) { + // 第一个不通过项提示 if (!validation.passed) { Taro.showToast({ title: validation.msg, icon: 'none', - mask: true, + mask: false, duration: 2000, }); return; @@ -50,15 +64,50 @@ this.onFinish && this.onFinish(); }); }, + preCheckValidators(keys, callback) { + const checklist = []; + // 从选定的项中验证 + keys.forEach(key => { + // 效的验证器 + if (this.validators[key]) { + checklist.push(this.validators[key]('msgOnly')); + } + }); + Promise.all(checklist).then(validations => { + for (let validation of validations) { + // 第一个不通过项提示 + if (!validation.passed) { + Taro.showToast({ + title: validation.msg, + icon: 'none', + mask: false, + duration: 2000, + }); + // 检查失败 + callback && callback(false); + return; + } + } + // 所有检查通过 + callback && callback(true); + }); + }, }, mounted() { - this.formData.$handleChange = (evt = []) => { - Object.keys(evt).forEach((key) => { - this.formData[key] = evt[key]; + // 当表单项变化时 + this.formRes.$handleChange = (evt = []) => { + Object.keys(evt).forEach(key => { + // 直接改值 + if (typeof this.formRes.formData[key] === 'undefined') { + this.$set(this.formRes.formData, key, evt[key]); + } else { + this.formRes.formData[key] = evt[key]; + } }); this.onChange && this.onChange(evt); }; - this.formData.$regItemValidator = (name, cb) => { + // 注册表单验证器 + this.formRes.$regItemValidator = (name, cb) => { this.validators[name] = cb; }; }, -- Gitblit v1.9.1