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-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 |
|
||||||
|
|
|
@ -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 |
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -21,7 +21,11 @@
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
inline: Boolean
|
inline: Boolean,
|
||||||
|
showMessage: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
rules() {
|
rules() {
|
||||||
|
|
|
@ -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: `
|
||||||
|
|
Loading…
Reference in New Issue