fix: formmodal layout not work

pull/1886/head
tanjinzhou 2020-03-16 13:27:38 +08:00
parent 3a16bb3ad4
commit 7cf72d9bf1
4 changed files with 51 additions and 56 deletions

@ -1 +1 @@
Subproject commit 8c9dee7ff6a3a18f335fba08073f14178fffb8b0
Subproject commit a69e38301cd2c54ecf47678ed4d1aa147eef2d7e

View File

@ -58,7 +58,7 @@ const Form = {
},
provide() {
return {
FormModelContext: this,
FormContext: this,
};
},
inject: {

View File

@ -69,14 +69,9 @@ export default {
hasFeedback: false,
autoLink: true,
}),
provide() {
return {
FormModelItemContext: this,
};
},
inject: {
configProvider: { default: () => ConfigConsumerProps },
FormModelContext: { default: () => ({}) },
FormContext: { default: () => ({}) },
},
data() {
return {
@ -89,7 +84,7 @@ export default {
computed: {
fieldValue() {
const model = this.FormModelContext.model;
const model = this.FormContext.model;
if (!model || !this.prop) {
return;
}
@ -121,13 +116,13 @@ export default {
},
mounted() {
if (this.prop) {
const { addField } = this.FormModelContext;
const { addField } = this.FormContext;
addField && addField(this);
this.initialValue = cloneDeep(this.fieldValue);
}
},
beforeDestroy() {
const { removeField } = this.FormModelContext;
const { removeField } = this.FormContext;
removeField && removeField(this);
},
methods: {
@ -153,13 +148,13 @@ export default {
this.validateState = errors ? 'error' : 'success';
this.validateMessage = errors ? errors[0].message : '';
callback(this.validateMessage, invalidFields);
this.FormModelContext &&
this.FormModelContext.$emit &&
this.FormModelContext.$emit('validate', this.prop, !errors, this.validateMessage || null);
this.FormContext &&
this.FormContext.$emit &&
this.FormContext.$emit('validate', this.prop, !errors, this.validateMessage || null);
});
},
getRules() {
let formRules = this.FormModelContext.rules;
let formRules = this.FormContext.rules;
const selfRules = this.rules;
const requiredRule =
this.required !== undefined ? { required: !!this.required, trigger: 'change' } : [];
@ -198,7 +193,7 @@ export default {
resetField() {
this.validateState = '';
this.validateMessage = '';
let model = this.FormModelContext.model || {};
let model = this.FormContext.model || {};
let value = this.fieldValue;
let path = this.prop;
if (path.indexOf(':') !== -1) {

View File

@ -3,16 +3,16 @@
exports[`renders ./antdv-demo/docs/form-model/demo/basic.md correctly 1`] = `
<form class="ant-form ant-form-horizontal">
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Activity name" class="">Activity name</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity name" class="">Activity name</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" class="ant-input"></span>
<!---->
</div>
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Activity zone" class="">Activity zone</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity zone" class="">Activity zone</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">please select your zone</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>
</div></span>
<!---->
@ -20,24 +20,24 @@ exports[`renders ./antdv-demo/docs/form-model/demo/basic.md correctly 1`] = `
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Activity time" class="">Activity time</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity time" class="">Activity time</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="min-width: 195px; width: 100%;" type="date"><div class=""><input readonly="true" placeholder="Pick a date" class="ant-calendar-picker-input ant-input"><i aria-label="icon: calendar" class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span></span>
<!---->
</div>
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Instant delivery" class="">Instant delivery</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Instant delivery" class="">Instant delivery</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner"></span></button></span>
<!---->
</div>
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Activity type" class="">Activity type</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity type" class="">Activity type</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-checkbox-group"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="1"><span class="ant-checkbox-inner"></span></span><span>
Online
</span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="2"><span class="ant-checkbox-inner"></span></span><span>
@ -50,8 +50,8 @@ exports[`renders ./antdv-demo/docs/form-model/demo/basic.md correctly 1`] = `
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Resources" class="">Resources</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Resources" class="">Resources</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>
Sponsor
</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>
@ -62,8 +62,8 @@ exports[`renders ./antdv-demo/docs/form-model/demo/basic.md correctly 1`] = `
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Activity form" class="">Activity form</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity form" class="">Activity form</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><textarea class="ant-input"></textarea></span>
<!---->
</div>
@ -82,24 +82,24 @@ exports[`renders ./antdv-demo/docs/form-model/demo/basic.md correctly 1`] = `
exports[`renders ./antdv-demo/docs/form-model/demo/custom-validation.md correctly 1`] = `
<form class="ant-form ant-form-horizontal">
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Password" class="">Password</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Password" class="">Password</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" autocomplete="off" class="ant-input"></span>
<!---->
</div>
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Confirm" class="">Confirm</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Confirm" class="">Confirm</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" autocomplete="off" class="ant-input"></span>
<!---->
</div>
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Age" class="">Age</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Age" class="">Age</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" class="ant-input"></span>
<!---->
</div>
@ -163,8 +163,8 @@ exports[`renders ./antdv-demo/docs/form-model/demo/horizontal-login.md correctly
exports[`renders ./antdv-demo/docs/form-model/demo/layout.md correctly 1`] = `
<form class="ant-form ant-form-horizontal">
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Form Layout" class="">Form Layout</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Form Layout" class="">Form Layout</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="horizontal"><span class="ant-radio-button-inner"></span></span><span>
Horizontal
</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="vertical"><span class="ant-radio-button-inner"></span></span><span>
@ -177,16 +177,16 @@ exports[`renders ./antdv-demo/docs/form-model/demo/layout.md correctly 1`] = `
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Field A" class="">Field A</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Field A" class="">Field A</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="input placeholder" type="text" class="ant-input"></span>
<!---->
</div>
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Field B" class="">Field B</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Field B" class="">Field B</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="input placeholder" type="text" class="ant-input"></span>
<!---->
</div>
@ -205,16 +205,16 @@ exports[`renders ./antdv-demo/docs/form-model/demo/layout.md correctly 1`] = `
exports[`renders ./antdv-demo/docs/form-model/demo/validation.md correctly 1`] = `
<form class="ant-form ant-form-horizontal">
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Activity name" class="ant-form-item-required">Activity name</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity name" class="ant-form-item-required">Activity name</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" class="ant-input"></span>
<!---->
</div>
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Activity zone" class="ant-form-item-required">Activity zone</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity zone" class="ant-form-item-required">Activity zone</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">please select your zone</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>
</div></span>
<!---->
@ -222,24 +222,24 @@ exports[`renders ./antdv-demo/docs/form-model/demo/validation.md correctly 1`] =
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Activity time" class="ant-form-item-required">Activity time</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity time" class="ant-form-item-required">Activity time</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="min-width: 195px; width: 100%;" type="date"><div class=""><input readonly="true" placeholder="Pick a date" class="ant-calendar-picker-input ant-input"><i aria-label="icon: calendar" class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span></span>
<!---->
</div>
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Instant delivery" class="">Instant delivery</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Instant delivery" class="">Instant delivery</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner"></span></button></span>
<!---->
</div>
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Activity type" class="ant-form-item-required">Activity type</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity type" class="ant-form-item-required">Activity type</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-checkbox-group"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="1"><span class="ant-checkbox-inner"></span></span><span>
Online
</span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="2"><span class="ant-checkbox-inner"></span></span><span>
@ -252,8 +252,8 @@ exports[`renders ./antdv-demo/docs/form-model/demo/validation.md correctly 1`] =
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Resources" class="ant-form-item-required">Resources</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Resources" class="ant-form-item-required">Resources</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>
Sponsor
</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>
@ -264,8 +264,8 @@ exports[`renders ./antdv-demo/docs/form-model/demo/validation.md correctly 1`] =
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-form-item-label"><label title="Activity form" class="ant-form-item-required">Activity form</label></div>
<div class="ant-col ant-form-item-control-wrapper">
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity form" class="ant-form-item-required">Activity form</label></div>
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><textarea class="ant-input"></textarea></span>
<!---->
</div>