ソースを参照

add show-message support

baiyaaaaa 8 年 前
コミット
bbd779c26f

+ 2 - 0
examples/docs/en-US/form.md

@@ -818,6 +818,7 @@ Form component allows you to verify your data, helping you find and correct erro
 | label-position | position of label | string | left/right/top | right |
 | label-width | width of label, and all form items will inherit from `Form` | string | — | — |
 | label-suffix | suffix of the label | string | — | — |
+| show-message  | whether to show the error message | boolean | — | true |
 
 ### Form Methods
 
@@ -837,3 +838,4 @@ Form component allows you to verify your data, helping you find and correct erro
 | required | whether the field is required or not, will be determined by validation rules if omitted | string |  — | false |
 | rules | validation rules of form | object | — | — |
 | error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |
+| show-message  | whether to show the error message | boolean | — | true |

+ 2 - 0
examples/docs/zh-CN/form.md

@@ -803,6 +803,7 @@
 | label-position | 表单域标签的位置 | string |  right/left/top            | right |
 | label-width | 表单域标签的宽度,所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | — | — |
 | label-suffix | 表单域标签的后缀 | string | — | — |
+| show-message  | 是否显示校验错误信息 | boolean | — | true |
 
 ### Form Methods
 
@@ -822,3 +823,4 @@
 | required | 是否必填,如不设置,则会根据校验规则自动生成 | bolean | — | false |
 | rules    | 表单验证规则 | object | — | — |
 | error    | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`,并显示该错误信息 | string | — | — |
+| show-message  | 是否显示校验错误信息 | boolean | — | true |

+ 6 - 2
packages/form/src/form-item.vue

@@ -10,7 +10,7 @@
     <div class="el-form-item__content" v-bind:style="contentStyle">
       <slot></slot>
       <transition name="el-zoom-in-top">
-        <div class="el-form-item__error" v-if="validateState === 'error'">{{validateMessage}}</div>
+        <div class="el-form-item__error" v-if="validateState === 'error' && showMessage && form.showMessage">{{validateMessage}}</div>
       </transition>
     </div>
   </div>
@@ -58,7 +58,11 @@
       required: Boolean,
       rules: [Object, Array],
       error: String,
-      validateStatus: String
+      validateStatus: String,
+      showMessage: {
+        type: Boolean,
+        default: true
+      }
     },
     watch: {
       error(value) {

+ 5 - 1
packages/form/src/form.vue

@@ -21,7 +21,11 @@
         type: String,
         default: ''
       },
-      inline: Boolean
+      inline: Boolean,
+      showMessage: {
+        type: Boolean,
+        default: true
+      }
     },
     watch: {
       rules() {

+ 33 - 0
test/unit/specs/form.spec.js

@@ -86,6 +86,39 @@ describe('Form', () => {
     expect(vm.$refs.labelLeft.$el.classList.contains('el-form--label-left')).to.be.true;
     done();
   });
+  it('show message', done => {
+    vm = createVue({
+      template: `
+        <el-form :model="form" ref="form">
+          <el-form-item label="活动名称" prop="name" :show-message="false"
+            :rules="{
+              required: true,
+              message: '请输入活动名称',
+              trigger: 'change',
+              min: 3,
+              max: 6
+            }"
+          >
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+        </el-form>
+      `,
+      data() {
+        return {
+          form: {
+            name: ''
+          }
+        };
+      }
+    }, true);
+    vm.$refs.form.validate(valid => {
+      expect(valid).to.not.true;
+      vm.$refs.form.$nextTick(_ => {
+        expect(vm.$el.querySelector('.el-form-item__error')).to.not.exist;
+        done();
+      });
+    });
+  });
   it('reset field', done => {
     vm = createVue({
       template: `