From 758ffe976bb2ff00237be95baf6513ea4b98a032 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Wed, 02 Mar 2022 12:11:20 +0800
Subject: [PATCH] 实现单选式开关
---
forms/form/CFormItem.vue | 41 ++++++++++++++++++++++++++++++-----------
1 files changed, 30 insertions(+), 11 deletions(-)
diff --git a/forms/form/CFormItem.vue b/forms/form/CFormItem.vue
index 2d0ed74..c7b1e2f 100644
--- a/forms/form/CFormItem.vue
+++ b/forms/form/CFormItem.vue
@@ -1,5 +1,5 @@
/**
- * CFormItem
+ * CFormItem - 表单套装组件，单项包囊器
* @author Tevin
* @tutorial rules see https://github.com/yiminghe/async-validator#type
*/
@@ -17,11 +17,28 @@
export default {
name: 'CFormItem',
props: {
- name: String,
- label: String,
- required: Boolean,
- rules: Array,
+ // 表单数据资源（表单组件内部机制专用）
formRes: Object,
+ // 表单项字段键名
+ name: String,
+ // 表单项中文名
+ label: String,
+ // 表单项验证规则之是否必填
+ required: Boolean,
+ // 表单项验证规则之复合规则
+ // 例如：[{type:'string', min: 2, max: 100}]
+ // 常用项：
+ // type string 类型，常见有 string、number、boolean、array、object、url、email
+ // len number string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度
+ // max number 必须设置 type：string 类型为字符串最大长度；number 类型时为最大值；array 类型时为数组最大长度
+ // min number 必须设置 type：string 类型为字符串最小长度；number 类型时为最小值；array 类型时为数组最小长度
+ // pattern RegExp 正则表达式匹配
+ // required boolean 是否为必选字段
+ // transform (value) => any 将字段值转换成目标值后进行校验
+ // message string 错误信息，不设置时会通过模板自动生成
+ rules: Array,
+ // 表单是否禁用
+ disabled: Boolean,
},
data() {
return {
@@ -35,8 +52,9 @@
name: this.name,
label: this.label,
required: this.isRequired,
+ disabled: this.disabled,
error: this.error,
- onChange: (evt) => this.onChange(evt),
+ onChange: evt => this.onChange(evt),
};
},
isRequired() {
@@ -66,8 +84,9 @@
!hasOwn.call(evt, 'constructor') &&
!hasOwn.call(evt.constructor.prototype, 'isPrototypeOf')
) {
- throw new Error('错误的表单项 onChange 参数类型！（At: ' + this.name + '）');
- return;
+ throw new Error(
+ '错误的表单项 onChange 参数类型！（At: ' + this.name + '）'
+ );
}
}
// 未改变值不触发
@@ -83,7 +102,7 @@
this.$nextTick(() => {
// 未设置验证
if (!this.required && !this.rules) {
- this.formRes.$regItemValidator(this.name, (validateType) => {
+ this.formRes.$regItemValidator(this.name, validateType => {
this.error = false;
return Promise.resolve({
name: this.name,
@@ -105,13 +124,13 @@
validator.messages(validateMsgs);
// 注册验证
let errTimer = null;
- this.formRes.$regItemValidator(this.name, (validateType) => {
+ this.formRes.$regItemValidator(this.name, validateType => {
return validator
.validate({
[this.name]: this.formRes.formData[this.name],
})
.then(
- (res) => {
+ res => {
this.error = false;
return {
name: this.name,
--
Gitblit v1.9.1