fix: 修复disabled、readonly、clearable 部分情况下不生效的bug

rare-treasure · Jul 19, 2021 · 215fcb8 · 215fcb8
1 parent 0c9bcf0
commit 215fcb8
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "v-form-engine",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "一个基于 vue + element-ui 的 PC 端表单引擎。支持灵活的配置项、编辑/查看两种视图、自定义模板/插槽、溢出隐藏、双击复制等...",
   "typings": "dist/index.d.ts",
   "main": "dist/v-form-engine.js",

diff --git a/src/form-engine.vue b/src/form-engine.vue
@@ -46,9 +46,21 @@
                 :is="getComponentName(item.type)"
                 :placeholder="getPlaceholder(item)"
                 :type="item.type"
-                :clearable="item.clearable || clearable"
-                :disabled="item.disabled || disabled"
-                :readonly="item.readonly"
+                :clearable="getAttrValue(
+                  getAttrValue(item, 'component-props', item),
+                  'clearable',
+                  getAttrValue(item, 'clearable', clearable)
+                )"
+                :disabled="getAttrValue(
+                  getAttrValue(item, 'component-props', item),
+                  'disabled',
+                  getAttrValue(item, 'disabled', disabled)
+                )"
+                :readonly="getAttrValue(
+                  getAttrValue(item, 'component-props', item),
+                  'readonly',
+                  getAttrValue(item, 'readonly', readonly)
+                )"
               >
                 <template v-if="item.type === 'select'">
                   <el-option
@@ -209,6 +221,9 @@ export default class FormEngine extends Vue {
   @Prop(Boolean)
   clearable!: boolean;
 
+  @Prop(Boolean)
+  readonly!: boolean;
+
   @Watch('items', {
     deep: true,
   })
@@ -281,15 +296,12 @@ export default class FormEngine extends Vue {
     const text = /(input|select|autocomplete)$/.test(cName)
       ? `请${item.type === 'select' ? '选择' : '输入'}`
       : '';
-    const cProps = item?.componentProps;
+    const cProps = this.getAttrValue(item, 'component-props', {});
     const isHideEditPlaceholder = item.isHideEditPlaceholder ?? this.isHideEditPlaceholder;
 
     // eslint-disable-next-line no-shadow
-    const getText = (text: string) => (this.disabled
-      || item.disabled
-      || item.readonly
-      || cProps?.disabled
-      || cProps?.readonly
+    const getText = (text: string) => (((cProps?.disabled ?? item.disabled ?? this.disabled) || (
+      cProps?.readonly ?? item.readonly ?? this.readonly))
       ? ''
       : text);
 

diff --git a/vetur/attributes.json b/vetur/attributes.json
@@ -19,6 +19,10 @@
     "type": "boolean",
     "description": "disable all components within the el-form, default: false"
   },
+  "readonly": {
+    "type": "boolean",
+    "description": "readonly all components within the el-form, default: false"
+  },
   "form-data": {
     "type": "object",
     "description": "data of form component, default: {}"

diff --git a/vetur/tags.json b/vetur/tags.json
@@ -1,6 +1,6 @@
 {
   "form-engine": {
-    "attributes": ["items", "rules", "form-data", "row-props", "row-on", "col-props", "col-on", "span", "clearable", "disabled", "not-edit-hide-placeholder"],
+    "attributes": ["items", "rules", "form-data", "row-props", "row-on", "col-props", "col-on", "span", "clearable", "disabled", "readonly", "not-edit-hide-placeholder"],
     "description": "form-engine, A PC form engine based on Vue + element UI. Support flexible configuration items, edit / view two views, custom template / slot, overflow hide, double-click copy, etc."
   }
 }