add show-message support

pull/2369/head
baiyaaaaa 2017-01-12 02:34:15 +08:00 committed by 杨奕
parent 6f9cf71096
commit bbd779c26f
5 changed files with 48 additions and 3 deletions

View File

@ -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-position | position of label | string | left/right/top | right |
| label-width | width of label, and all form items will inherit from `Form` | string | — | — | | label-width | width of label, and all form items will inherit from `Form` | string | — | — |
| label-suffix | suffix of the label | string | — | — | | label-suffix | suffix of the label | string | — | — |
| show-message | whether to show the error message | boolean | — | true |
### Form Methods ### 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 | | required | whether the field is required or not, will be determined by validation rules if omitted | string | — | false |
| rules | validation rules of form | object | — | — | | 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 | — | — | | 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 |

View File

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

View File

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

View File

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

View File

@ -86,6 +86,39 @@ describe('Form', () => {
expect(vm.$refs.labelLeft.$el.classList.contains('el-form--label-left')).to.be.true; expect(vm.$refs.labelLeft.$el.classList.contains('el-form--label-left')).to.be.true;
done(); 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 => { it('reset field', done => {
vm = createVue({ vm = createVue({
template: ` template: `