github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

doc: add form demo

pull/5094/head
tangjinzhou 2021-12-28 21:46:35 +08:00
parent ed3740048a
commit 3c0979c5e4
7 changed files with 736 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

426
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -908,19 +908,7 @@ exports[`renders ./components/form/demo/normal-login.vue correctly 1`] = `
<!---->
</div>
</div>
<div class="login-form-wrap">
<div class="ant-row ant-form-item" no-style="">
<!---->
<div class="ant-col ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input id="normal_login_remember" type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Remember me</span></label></div>
<!---->
</div>
<!---->
<!---->
</div>
</div><a class="login-form-forgot" href="">Forgot password</a>
</div>
<div class="login-form-wrap"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input id="normal_login_remember" type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Remember me</span></label><a class="login-form-forgot" href="">Forgot password</a></div>
<div class="ant-row ant-form-item">
<!---->
<div class="ant-col ant-form-item-control">
@ -937,6 +925,148 @@ exports[`renders ./components/form/demo/normal-login.vue correctly 1`] = `
</form>
`;
exports[`renders ./components/form/demo/time-related-controls.vue correctly 1`] = `
<form class="ant-form ant-form-horizontal">
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label html-for="time_related_controls_date-picker" class="ant-form-item-required" title="DatePicker">DatePicker
<!---->
</label></div>
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<!---->
<div class="ant-picker">
<div class="ant-picker-input"><input id="time_related_controls_date-picker" readonly="" placeholder="Select date" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
<!---->
</div>
</div>
</div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label html-for="time_related_controls_date-time-picker" class="ant-form-item-required" title="DatePicker[showTime]">DatePicker[showTime]
<!---->
</label></div>
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<!---->
<div class="ant-picker">
<div class="ant-picker-input"><input id="time_related_controls_date-time-picker" readonly="" placeholder="Select date" title="" size="21" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
<!---->
</div>
</div>
</div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label html-for="time_related_controls_month-picker" class="ant-form-item-required" title="MonthPicker">MonthPicker
<!---->
</label></div>
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<!---->
<div class="ant-picker">
<div class="ant-picker-input"><input id="time_related_controls_month-picker" readonly="" placeholder="Select month" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
<!---->
</div>
</div>
</div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label html-for="time_related_controls_range-picker" class="ant-form-item-required" title="RangePicker">RangePicker
<!---->
</label></div>
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<!---->
<div class="ant-picker ant-picker-range">
<div class="ant-picker-input ant-picker-input-active"><input id="time_related_controls_range-picker" readonly="" placeholder="Start date" size="12" autocomplete="off"></div>
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="12" autocomplete="off"></div>
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
<!---->
</div>
</div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label html-for="time_related_controls_range-time-picker" class="ant-form-item-required" title="RangePicker[showTime]">RangePicker[showTime]
<!---->
</label></div>
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<!---->
<div class="ant-picker ant-picker-range">
<div class="ant-picker-input ant-picker-input-active"><input id="time_related_controls_range-time-picker" readonly="" placeholder="Start date" size="21" autocomplete="off"></div>
<div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
<div class="ant-picker-input"><input readonly="" placeholder="End date" size="21" autocomplete="off"></div>
<div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
<!---->
</div>
</div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label html-for="time_related_controls_time-picker" class="ant-form-item-required" title="TimePicker">TimePicker
<!---->
</label></div>
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<!---->
<div class="ant-picker">
<div class="ant-picker-input"><input id="time_related_controls_time-picker" readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span>
<!---->
</div>
</div>
</div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="ant-row ant-form-item">
<!---->
<div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"><button class="ant-btn ant-btn-primary" type="submit">
<!----><span>Submit</span>
</button></div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
</form>
`;
exports[`renders ./components/form/demo/useForm-basic.vue correctly 1`] = `
<form class="ant-form ant-form-horizontal">
<div class="ant-row ant-form-item">
@ -1178,6 +1308,276 @@ exports[`renders ./components/form/demo/useForm-trigger.vue correctly 1`] = `
</form>
`;
exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
<form class="ant-form ant-form-horizontal">
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-6 ant-form-item-label"><label class="" title="Plain Text">Plain Text
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"><span class="ant-form-text">China</span></div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-6 ant-form-item-label"><label html-for="validate_other_select" class="ant-form-item-required" title="Select">Select
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<div class="ant-select ant-select-single ant-select-show-arrow">
<!---->
<!---->
<div class="ant-select-selector"><span class="ant-select-selection-search"><input id="validate_other_select" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="validate_other_select_list" aria-autocomplete="list" aria-controls="validate_other_select_list" aria-activedescendant="validate_other_select_list_0" readonly="" unselectable="on" type="search"></span>
<!----><span class="ant-select-selection-placeholder">Please select a country</span>
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span>
<!---->
</div>
</div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-6 ant-form-item-label"><label html-for="validate_other_select-multiple" class="ant-form-item-required" title="Select[multiple]">Select[multiple]
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<div class="ant-select ant-select-multiple ant-select-show-search">
<!---->
<!---->
<div class="ant-select-selector">
<div class="ant-select-selection-overflow">
<!---->
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 0px;"><input id="validate_other_select-multiple" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="validate_other_select-multiple_list" aria-autocomplete="list" aria-controls="validate_other_select-multiple_list" aria-activedescendant="validate_other_select-multiple_list_0" readonly="" unselectable="on" type="search"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
</div>
</div><span class="ant-select-selection-placeholder">Please select favourite colors</span>
</div>
<!---->
<!---->
</div>
</div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-6 ant-form-item-label"><label class="" title="InputNumber">InputNumber
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<div class="ant-input-number">
<div class="ant-input-number-handler-wrap"><span unselectable="on" role="button" aria-label="Increase Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-up"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg focusable="false" class="" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span unselectable="on" role="button" aria-label="Decrease Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-down"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span></span></div>
<div class="ant-input-number-input-wrap"><input autocomplete="off" role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" step="1" class="ant-input-number-input"></div>
</div><span class="ant-form-text">machines</span>
</div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-6 ant-form-item-label"><label html-for="validate_other_switch" class="" title="Switch">Switch
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"><button id="validate_other_switch" type="button" role="switch" class="ant-switch">
<!----><span class="ant-switch-inner"><!----></span>
</button></div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-6 ant-form-item-label"><label html-for="validate_other_slider" class="" title="Slider">Slider
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<div id="validate_other_slider" tabindex="-1" class="ant-slider ant-slider-with-marks">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
<div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left: 0%;"></span><span class="ant-slider-dot" style="left: 20%;"></span><span class="ant-slider-dot" style="left: 40%;"></span><span class="ant-slider-dot" style="left: 60%;"></span><span class="ant-slider-dot" style="left: 80%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
<!---->
<div class="ant-slider-handle" style="left: 0%; transform: translateX(-50%);" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-disabled="false"></div>
<div class="ant-slider-mark"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="transform: translateX(-50%); left: 0%;">A</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 20%;">B</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 40%;">C</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 60%;">D</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 80%;">E</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 100%;">F</span></div>
</div>
</div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-6 ant-form-item-label"><label html-for="validate_other_radio-group" class="" title="Radio.Group">Radio.Group
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" id="validate_other_radio-group"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="a"><span class="ant-radio-inner"></span></span><span>item 1</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="b"><span class="ant-radio-inner"></span></span><span>item 2</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="c"><span class="ant-radio-inner"></span></span><span>item 3</span></label></div>
</div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-6 ant-form-item-label"><label html-for="validate_other_radio-button" class="ant-form-item-required" title="Radio.Button">Radio.Button
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" id="validate_other_radio-button"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>item 1</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>item 2</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>item 3</span></label></div>
</div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-6 ant-form-item-label"><label html-for="validate_other_checkbox-group" class="" title="Checkbox.Group">Checkbox.Group
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<div class="ant-checkbox-group" id="validate_other_checkbox-group">
<div class="ant-row">
<div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked" style="line-height: 32px;"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="A"><span class="ant-checkbox-inner"></span></span><span>A</span></label></div>
<div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled" style="line-height: 32px;"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="B"><span class="ant-checkbox-inner"></span></span><span>B</span></label></div>
<div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper" style="line-height: 32px;"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="C"><span class="ant-checkbox-inner"></span></span><span>C</span></label></div>
<div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper" style="line-height: 32px;"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="D"><span class="ant-checkbox-inner"></span></span><span>D</span></label></div>
<div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper" style="line-height: 32px;"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="E"><span class="ant-checkbox-inner"></span></span><span>E</span></label></div>
<div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper" style="line-height: 32px;"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="F"><span class="ant-checkbox-inner"></span></span><span>F</span></label></div>
</div>
</div>
</div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-6 ant-form-item-label"><label html-for="validate_other_rate" class="" title="Rate">Rate
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<ul id="validate_other_rate" class="ant-rate" tabindex="0" role="radiogroup">
<li class="ant-rate-star ant-rate-star-full">
<div role="radio" aria-checked="true" aria-posinset="1" aria-setsize="5" tabindex="0">
<div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg focusable="false" class="" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
<div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg focusable="false" class="" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
</div>
</li>
<li class="ant-rate-star ant-rate-star-full">
<div role="radio" aria-checked="true" aria-posinset="2" aria-setsize="5" tabindex="0">
<div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg focusable="false" class="" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
<div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg focusable="false" class="" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
</div>
</li>
<li class="ant-rate-star ant-rate-star-full">
<div role="radio" aria-checked="true" aria-posinset="3" aria-setsize="5" tabindex="0">
<div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg focusable="false" class="" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
<div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg focusable="false" class="" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
</div>
</li>
<li class="ant-rate-star ant-rate-star-half ant-rate-star-active">
<div role="radio" aria-checked="true" aria-posinset="4" aria-setsize="5" tabindex="0">
<div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg focusable="false" class="" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
<div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg focusable="false" class="" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
</div>
</li>
<li class="ant-rate-star ant-rate-star-zero">
<div role="radio" aria-checked="false" aria-posinset="5" aria-setsize="5" tabindex="0">
<div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg focusable="false" class="" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
<div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg focusable="false" class="" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
</div>
</li>
</ul>
</div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-6 ant-form-item-label"><label html-for="validate_other_upload" class="" title="Upload">Upload
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"><span><div class="ant-upload ant-upload-select ant-upload-select-picture"><span role="button" tabindex="0" class="ant-upload"><input id="validate_other_upload" type="file" style="display: none;" accept=""><button class="ant-btn" type="button"><span role="img" aria-label="upload" class="anticon anticon-upload"><svg focusable="false" class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Click to upload</span></button></span></div>
<div class="ant-upload-list ant-upload-list-picture"></div></span>
</div>
<!---->
</div>
<!---->
<div class="ant-form-item-extra">longgggggggggggggggggggggggggggggggggg</div>
</div>
</div>
<div class="ant-row ant-form-item">
<div class="ant-col ant-col-6 ant-form-item-label"><label class="" title="Dragger">Dragger
<!---->
</label></div>
<div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"><span><div class="ant-upload ant-upload-drag"><span role="button" tabindex="0" class="ant-upload ant-upload-btn"><input id="validate_other_dragger" type="file" style="display: none;" accept=""><div class="ant-upload-drag-container"><p class="ant-upload-drag-icon"><span role="img" aria-label="inbox" class="anticon anticon-inbox"><svg focusable="false" class="" data-icon="inbox" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"></path></svg></span></p>
<p class="ant-upload-text">Click or drag file to this area to upload</p>
<p class="ant-upload-hint">Support for a single or bulk upload.</p>
</div></span>
</div>
<div class="ant-upload-list ant-upload-list-text"></div></span>
</div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class="ant-row ant-form-item">
<!---->
<div class="ant-col ant-col-12 ant-col-offset-6 ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"><button class="ant-btn ant-btn-primary" type="submit">
<!----><span>Submit</span>
</button></div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
</form>
`;
exports[`renders ./components/form/demo/validation.vue correctly 1`] = `
<form class="ant-form ant-form-horizontal">
<div class="ant-row ant-form-item">

2
components/form/demo/form-in-modal.vue
View File

@ -34,7 +34,7 @@ When user visit a page with a list of items, and want to create a new item. The
<a-input v-model:value="formState.title" />
</a-form-item>
<a-form-item name="description" label="Description">
<a-input v-model:value="formState.description" type="textarea" />
<a-textarea v-model:value="formState.description" />
</a-form-item>
<a-form-item name="modifier" class="collection-create-form_last-form-item">
<a-radio-group v-model:value="formState.modifier">

6
components/form/demo/index.vue
View File

@ -17,6 +17,8 @@
<dynamicRuleVue />
<formContextVue />
<formInModalVue />
<timeRelatedControlsVue />
<validateOtherVue />
<UseFormBasic />
<UseFormNested />
<UseFormTrigger />
@ -46,6 +48,8 @@ import UseFormNested from './useForm-nested.vue';
import UseFormTrigger from './useForm-trigger.vue';
import UseFormMerge from './useForm-merge.vue';
import CustomizedFormControls from './customized-form-controls.vue';
import timeRelatedControlsVue from './time-related-controls.vue';
import validateOtherVue from './validate-other.vue';
import CN from '../index.zh-CN.md';
import US from '../index.en-US.md';
@ -53,6 +57,8 @@ export default defineComponent({
US,
CN,
components: {
timeRelatedControlsVue,
validateOtherVue,
Basic,
CustomValidation,
DynamicFormItem,

118
components/form/demo/time-related-controls.vue Normal file
View File

@ -0,0 +1,118 @@
<docs>
---
order: 16
title:
zh-CN: 时间类控件
en-US: Time-related Controls
---
## zh-CN
时间类组件的 `value` 类型为 `dayjs` 对象，所以在提交服务器前需要预处理。
或者使用 `valueFormat` 组件内部会自动处理。
## en-US
The `value` of time-related components is a `dayjs` object, which we need to pre-process it before we submit to server.
or use `valueFormat` to format.
</docs>
<template>
<a-form
:model="formState"
name="time_related_controls"
v-bind="formItemLayout"
@finish="onFinish"
@finishFailed="onFinishFailed"
>
<a-form-item name="date-picker" label="DatePicker" v-bind="config">
<a-date-picker v-model:value="formState['date-picker']" value-format="YYYY-MM-DD" />
</a-form-item>
<a-form-item name="date-time-picker" label="DatePicker[showTime]" v-bind="config">
<a-date-picker
v-model:value="formState['date-time-picker']"
show-time
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</a-form-item>
<a-form-item name="month-picker" label="MonthPicker" v-bind="config">
<a-date-picker
v-model:value="formState['month-picker']"
value-format="YYYY-MM"
picker="month"
/>
</a-form-item>
<a-form-item name="range-picker" label="RangePicker" v-bind="rangeConfig">
<a-range-picker v-model:value="formState['range-picker']" value-format="YYYY-MM-DD" />
</a-form-item>
<a-form-item name="range-time-picker" label="RangePicker[showTime]" v-bind="rangeConfig">
<a-range-picker
v-model:value="formState['range-time-picker']"
show-time
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</a-form-item>
<a-form-item name="time-picker" label="TimePicker" v-bind="config">
<a-time-picker v-model:value="formState['time-picker']" value-format="HH:mm:ss" />
</a-form-item>
<a-form-item
:wrapper-col="{
xs: { span: 24, offset: 0 },
sm: { span: 16, offset: 8 },
}"
>
<a-button type="primary" html-type="submit">Submit</a-button>
</a-form-item>
</a-form>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue';
interface FormState {
'date-picker': string;
'date-time-picker': string;
'month-picker': string;
'range-picker': [string, string];
'range-time-picker': [string, string];
'time-picker': string;
}
export default defineComponent({
setup() {
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
};
const config = {
rules: [{ type: 'string' as const, required: true, message: 'Please select time!' }],
};
const rangeConfig = {
rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
};
const formState = reactive({} as FormState);
const onFinish = (values: any) => {
console.log('Success:', values, formState);
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
return {
formState,
onFinish,
onFinishFailed,
formItemLayout,
config,
rangeConfig,
};
},
});
</script>

196
components/form/demo/validate-other.vue Normal file
View File

@ -0,0 +1,196 @@
<docs>
---
order: 24
title:
zh-CN: 校验其他组件
en-US: Other Form Controls
---
## zh-CN
以上演示没有出现的表单控件对应的校验演示。
## en-US
Demonstration of validation configuration for form controls which are not shown in the demos above.
</docs>
<template>
<a-form
:model="formState"
name="validate_other"
v-bind="formItemLayout"
@finishFailed="onFinishFailed"
@finish="onFinish"
>
<a-form-item label="Plain Text">
<span class="ant-form-text">China</span>
</a-form-item>
<a-form-item
name="select"
label="Select"
has-feedback
:rules="[{ required: true, message: 'Please select your country!' }]"
>
<a-select v-model:value="formState.select" placeholder="Please select a country">
<a-select-option value="china">China</a-select-option>
<a-select-option value="usa">U.S.A</a-select-option>
</a-select>
</a-form-item>
<a-form-item
name="select-multiple"
label="Select[multiple]"
:rules="[{ required: true, message: 'Please select your favourite colors!', type: 'array' }]"
>
<a-select
v-model:value="formState['select-multiple']"
mode="multiple"
placeholder="Please select favourite colors"
>
<a-select-option value="red">Red</a-select-option>
<a-select-option value="green">Green</a-select-option>
<a-select-option value="blue">Blue</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="InputNumber">
<a-form-item name="input-number" no-style>
<a-input-number v-model:value="formState['input-number']" :min="1" :max="10" />
</a-form-item>
<span class="ant-form-text">machines</span>
</a-form-item>
<a-form-item name="switch" label="Switch">
<a-switch v-model:checked="formState.switch" />
</a-form-item>
<a-form-item name="slider" label="Slider">
<a-slider
v-model:value="formState.slider"
:marks="{
0: 'A',
20: 'B',
40: 'C',
60: 'D',
80: 'E',
100: 'F',
}"
/>
</a-form-item>
<a-form-item name="radio-group" label="Radio.Group">
<a-radio-group v-model:value="formState['radio-group']">
<a-radio value="a">item 1</a-radio>
<a-radio value="b">item 2</a-radio>
<a-radio value="c">item 3</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
name="radio-button"
label="Radio.Button"
:rules="[{ required: true, message: 'Please pick an item!' }]"
>
<a-radio-group v-model:value="formState['radio-button']">
<a-radio-button value="a">item 1</a-radio-button>
<a-radio-button value="b">item 2</a-radio-button>
<a-radio-button value="c">item 3</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="checkbox-group" label="Checkbox.Group">
<a-checkbox-group v-model:value="formState['checkbox-group']">
<a-row>
<a-col :span="8">
<a-checkbox value="A" style="line-height: 32px">A</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="B" style="line-height: 32px" disabled>B</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="C" style="line-height: 32px">C</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="D" style="line-height: 32px">D</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="E" style="line-height: 32px">E</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="F" style="line-height: 32px">F</a-checkbox>
</a-col>
</a-row>
</a-checkbox-group>
</a-form-item>
<a-form-item name="rate" label="Rate">
<a-rate v-model:value="formState.rate" allow-half />
</a-form-item>
<a-form-item name="upload" label="Upload" extra="longgggggggggggggggggggggggggggggggggg">
<a-upload
v-model:fileList="formState.upload"
name="logo"
action="/upload.do"
list-type="picture"
>
<a-button>
<template #icon><UploadOutlined /></template>
Click to upload
</a-button>
</a-upload>
</a-form-item>
<a-form-item label="Dragger">
<a-form-item name="dragger" no-style>
<a-upload-dragger v-model:fileList="formState.dragger" name="files" action="/upload.do">
<p class="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p class="ant-upload-text">Click or drag file to this area to upload</p>
<p class="ant-upload-hint">Support for a single or bulk upload.</p>
</a-upload-dragger>
</a-form-item>
</a-form-item>
<a-form-item :wrapper-col="{ span: 12, offset: 6 }">
<a-button type="primary" html-type="submit">Submit</a-button>
</a-form-item>
</a-form>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { UploadOutlined, InboxOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: {
UploadOutlined,
InboxOutlined,
},
setup() {
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
};
const formState = reactive<Record<string, any>>({
'input-number': 3,
'checkbox-group': ['A', 'B'],
rate: 3.5,
});
const onFinish = (values: any) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
return {
formState,
onFinish,
onFinishFailed,
formItemLayout,
};
},
});
</script>

1
components/form/index.en-US.md
View File

@ -43,6 +43,7 @@ A form consists of one or more form fields whose type includes input, textarea,
| name | Form name. Will be the prefix of Field `id` | string | - | 2.0.0 |
| scrollToFirstError | Auto scroll to first failed field when submit | boolean \| [options](https://github.com/stipsan/scroll-into-view-if-needed/#options) | false | 2.0.0 |
| validateTrigger | Config field validate trigger | string \| string[] | `change` | 2.0.0 |
| noStyle | No style for `true`, used as a pure field control | boolean | false | 3.0 |
### Events

1
components/form/index.zh-CN.md
View File

@ -44,6 +44,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| [options](https://github.com/stipsan/scroll-into-view-if-needed/#options) | false | 2.0.0 |
| name | 表单名称，会作为表单字段 `id` 前缀使用 | string | - | 2.0.0 |
| validateTrigger | 统一设置字段校验规则 | string \| string[] | `change` | 2.0.0 |
| noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false | 3.0 |
### 事件