mirror of https://github.com/ElemeFE/element
add show-message support
parent
6f9cf71096
commit
bbd779c26f
|
@ -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 |
|
||||
|
|
|
@ -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 |
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -21,7 +21,11 @@
|
|||
type: String,
|
||||
default: ''
|
||||
},
|
||||
inline: Boolean
|
||||
inline: Boolean,
|
||||
showMessage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
rules() {
|
||||
|
|
|
@ -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: `
|
||||
|
|
Loading…
Reference in New Issue