chenhaodong / mew-iview

Browse Code »

Commit 21acf032acb2139385e3485f22a7fc1fdddf3d6d

Authored by 梁灏 2018-02-09 16:42:04 +0800

1 parent 500694ba

update Form demo

Showing 1 changed file with 482 additions and 406 deletions Show diff stats

Inline Side-by-side

examples/routers/form.vue

Show/Hide comments View file @21acf03

1	-<template>
2	- <div>
3	- <Tabs type="card">
4	- <TabPane label="默认大小">
5	- <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
6	- <Form-item label-for="autocomplete" prop="name">
7	- <span slot="label"><Icon type="ionic"></Icon></span>
8	- <AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search"></AutoComplete>
9	- </Form-item>
10	- <Form-item label-for="input" label="介绍" prop="desc">
11	- <Input element-id="input" icon="ios-search" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
12	- </Form-item>
13	- <Form-item label="邮箱" prop="mail">
14	- <!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
15	- <ColorPicker v-model="formValidate.mail"></ColorPicker>
16	- </Form-item>
17	- <Form-item label-for="select" label="城市" prop="city">
18	- <Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地">
19	- <Option value="beijing">北京市</Option>
20	- <Option value="shanghai">上海市</Option>
21	- <Option value="shenzhen">深圳市</Option>
22	- </Select>
23	- </Form-item>
24	- <Form-item label-for="date" label="选择日期" prop="date">
25	- <Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>
26	- </Form-item>
27	- <Form-item label-for="cascader" label="级联选择" prop="cascader">
28	- <Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader"></Cascader>
29	- </Form-item>	1	+<!--<template>-->
		2	+ <!--<div>-->
		3	+ <!--<Tabs type="card">-->
		4	+ <!--<TabPane label="默认大小">-->
		5	+ <!--<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">-->
		6	+ <!--<Form-item label-for="autocomplete" prop="name">-->
		7	+ <!--<span slot="label"><Icon type="ionic"></Icon></span>-->
		8	+ <!--<AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search"></AutoComplete>-->
		9	+ <!--</Form-item>-->
		10	+ <!--<Form-item label-for="input" label="介绍" prop="desc">-->
		11	+ <!--<Input element-id="input" icon="ios-search" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>-->
		12	+ <!--</Form-item>-->
		13	+ <!--<Form-item label="邮箱" prop="mail">-->
		14	+ <!--<!–<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>–>-->
		15	+ <!--<ColorPicker v-model="formValidate.mail"></ColorPicker>-->
		16	+ <!--</Form-item>-->
		17	+ <!--<Form-item label-for="select" label="城市" prop="city">-->
		18	+ <!--<Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地">-->
		19	+ <!--<Option value="beijing">北京市</Option>-->
		20	+ <!--<Option value="shanghai">上海市</Option>-->
		21	+ <!--<Option value="shenzhen">深圳市</Option>-->
		22	+ <!--</Select>-->
		23	+ <!--</Form-item>-->
		24	+ <!--<Form-item label-for="date" label="选择日期" prop="date">-->
		25	+ <!--<Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>-->
		26	+ <!--</Form-item>-->
		27	+ <!--<Form-item label-for="cascader" label="级联选择" prop="cascader">-->
		28	+ <!--<Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader"></Cascader>-->
		29	+ <!--</Form-item>-->
		30	+
		31	+ <!--<Form-item label-for="inputnumber" label="数字框" prop="inputnumber">-->
		32	+ <!--<InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber"></InputNumber>-->
		33	+ <!--</Form-item>-->
		34	+
		35	+ <!--<Form-item label="选择日期">-->
		36	+ <!--<Row>-->
		37	+ <!--<Col span="11">-->
		38	+ <!--<Form-item prop="date">-->
		39	+ <!--<Date-picker type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>-->
		40	+ <!--</Form-item>-->
		41	+ <!--</Col>-->
		42	+ <!--<Col span="2" style="text-align: center">-</Col>-->
		43	+ <!--<Col span="11">-->
		44	+ <!--<Form-item prop="time">-->
		45	+ <!--<Time-picker type="time" placeholder="选择时间" v-model="formValidate.time"></Time-picker>-->
		46	+ <!--</Form-item>-->
		47	+ <!--</Col>-->
		48	+ <!--</Row>-->
		49	+ <!--</Form-item>-->
		50	+ <!--<Form-item label="性别" prop="gender">-->
		51	+ <!--<Radio-group v-model="formValidate.gender">-->
		52	+ <!--<Radio label="male">男</Radio>-->
		53	+ <!--<Radio label="female">女</Radio>-->
		54	+ <!--</Radio-group>-->
		55	+ <!--</Form-item>-->
		56	+ <!--<Form-item label="爱好" prop="interest">-->
		57	+ <!--<Checkbox-group v-model="formValidate.interest">-->
		58	+ <!--<Checkbox label="吃饭"></Checkbox>-->
		59	+ <!--<Checkbox label="睡觉"></Checkbox>-->
		60	+ <!--<Checkbox label="跑步"></Checkbox>-->
		61	+ <!--<Checkbox label="看电影"></Checkbox>-->
		62	+ <!--</Checkbox-group>-->
		63	+ <!--</Form-item>-->
		64	+ <!--<Form-item>-->
		65	+ <!--<Button type="primary" @click="handleSubmit('formValidate')" icon="ios-cloud-upload-outline">提交</Button>-->
		66	+ <!--<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" icon="ios-reload">重置</Button>-->
		67	+ <!--</Form-item>-->
		68	+ <!--</Form>-->
		69	+ <!--</TabPane>-->
		70	+ <!--<TabPane label="小表单">-->
		71	+ <!--<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">-->
		72	+ <!--<Form-item label-for="autocomplete" prop="name">-->
		73	+ <!--<span slot="label"><Icon type="ionic"></Icon></span>-->
		74	+ <!--<AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search" size="small"></AutoComplete>-->
		75	+ <!--</Form-item>-->
		76	+ <!--<Form-item label-for="input" label="介绍" prop="desc">-->
		77	+ <!--<Input element-id="input" icon="ios-search" size="small" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>-->
		78	+ <!--</Form-item>-->
		79	+ <!--<Form-item label="邮箱" prop="mail">-->
		80	+ <!--<!–<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>–>-->
		81	+ <!--<ColorPicker v-model="formValidate.mail" size="small"></ColorPicker>-->
		82	+ <!--</Form-item>-->
		83	+ <!--<Form-item label-for="select" label="城市" prop="city">-->
		84	+ <!--<Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地" size="small">-->
		85	+ <!--<Option value="beijing">北京市</Option>-->
		86	+ <!--<Option value="shanghai">上海市</Option>-->
		87	+ <!--<Option value="shenzhen">深圳市</Option>-->
		88	+ <!--</Select>-->
		89	+ <!--</Form-item>-->
		90	+ <!--<Form-item label-for="date" label="选择日期" prop="date">-->
		91	+ <!--<Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date" size="small"></Date-picker>-->
		92	+ <!--</Form-item>-->
		93	+ <!--<Form-item label-for="cascader" label="级联选择" prop="cascader">-->
		94	+ <!--<Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader" size="small"></Cascader>-->
		95	+ <!--</Form-item>-->
30		96
31	- <Form-item label-for="inputnumber" label="数字框" prop="inputnumber">
32	- <InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber"></InputNumber>
33	- </Form-item>	97	+ <!--<Form-item label-for="inputnumber" label="数字框" prop="inputnumber">-->
		98	+ <!--<InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber" size="small"></InputNumber>-->
		99	+ <!--</Form-item>-->
34		100
35	- <Form-item label="选择日期">
36	- <Row>
37	- <Col span="11">
38	- <Form-item prop="date">
39	- <Date-picker type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>
40	- </Form-item>
41	- </Col>
42	- <Col span="2" style="text-align: center">-</Col>
43	- <Col span="11">
44	- <Form-item prop="time">
45	- <Time-picker type="time" placeholder="选择时间" v-model="formValidate.time"></Time-picker>
46	- </Form-item>
47	- </Col>
48	- </Row>
49	- </Form-item>
50	- <Form-item label="性别" prop="gender">
51	- <Radio-group v-model="formValidate.gender">
52	- <Radio label="male">男</Radio>
53	- <Radio label="female">女</Radio>
54	- </Radio-group>
55	- </Form-item>
56	- <Form-item label="爱好" prop="interest">
57	- <Checkbox-group v-model="formValidate.interest">
58	- <Checkbox label="吃饭"></Checkbox>
59	- <Checkbox label="睡觉"></Checkbox>
60	- <Checkbox label="跑步"></Checkbox>
61	- <Checkbox label="看电影"></Checkbox>
62	- </Checkbox-group>
63	- </Form-item>
64	- <Form-item>
65	- <Button type="primary" @click="handleSubmit('formValidate')" icon="ios-cloud-upload-outline">提交</Button>
66	- <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" icon="ios-reload">重置</Button>
67	- </Form-item>
68	- </Form>
69	- </TabPane>
70	- <TabPane label="小表单">
71	- <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
72	- <Form-item label-for="autocomplete" prop="name">
73	- <span slot="label"><Icon type="ionic"></Icon></span>
74	- <AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search" size="small"></AutoComplete>
75	- </Form-item>
76	- <Form-item label-for="input" label="介绍" prop="desc">
77	- <Input element-id="input" icon="ios-search" size="small" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
78	- </Form-item>
79	- <Form-item label="邮箱" prop="mail">
80	- <!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
81	- <ColorPicker v-model="formValidate.mail" size="small"></ColorPicker>
82	- </Form-item>
83	- <Form-item label-for="select" label="城市" prop="city">
84	- <Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地" size="small">
85	- <Option value="beijing">北京市</Option>
86	- <Option value="shanghai">上海市</Option>
87	- <Option value="shenzhen">深圳市</Option>
88	- </Select>
89	- </Form-item>
90	- <Form-item label-for="date" label="选择日期" prop="date">
91	- <Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date" size="small"></Date-picker>
92	- </Form-item>
93	- <Form-item label-for="cascader" label="级联选择" prop="cascader">
94	- <Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader" size="small"></Cascader>
95	- </Form-item>	101	+ <!--<Form-item label="选择日期">-->
		102	+ <!--<Row>-->
		103	+ <!--<Col span="11">-->
		104	+ <!--<Form-item prop="date">-->
		105	+ <!--<Date-picker type="date" placeholder="选择日期" v-model="formValidate.date" size="small"></Date-picker>-->
		106	+ <!--</Form-item>-->
		107	+ <!--</Col>-->
		108	+ <!--<Col span="2" style="text-align: center">-</Col>-->
		109	+ <!--<Col span="11">-->
		110	+ <!--<Form-item prop="time">-->
		111	+ <!--<Time-picker type="time" placeholder="选择时间" v-model="formValidate.time" size="small"></Time-picker>-->
		112	+ <!--</Form-item>-->
		113	+ <!--</Col>-->
		114	+ <!--</Row>-->
		115	+ <!--</Form-item>-->
		116	+ <!--<Form-item label="性别" prop="gender">-->
		117	+ <!--<Radio-group v-model="formValidate.gender" size="small">-->
		118	+ <!--<Radio label="male">男</Radio>-->
		119	+ <!--<Radio label="female">女</Radio>-->
		120	+ <!--</Radio-group>-->
		121	+ <!--</Form-item>-->
		122	+ <!--<Form-item label="爱好" prop="interest" size="small">-->
		123	+ <!--<Checkbox-group v-model="formValidate.interest">-->
		124	+ <!--<Checkbox label="吃饭"></Checkbox>-->
		125	+ <!--<Checkbox label="睡觉"></Checkbox>-->
		126	+ <!--<Checkbox label="跑步"></Checkbox>-->
		127	+ <!--<Checkbox label="看电影"></Checkbox>-->
		128	+ <!--</Checkbox-group>-->
		129	+ <!--</Form-item>-->
		130	+ <!--<Form-item>-->
		131	+ <!--<Button type="primary" @click="handleSubmit('formValidate')" size="small" icon="ios-cloud-upload-outline">提交</Button>-->
		132	+ <!--<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" size="small" icon="ios-reload">重置</Button>-->
		133	+ <!--</Form-item>-->
		134	+ <!--</Form>-->
		135	+ <!--</TabPane>-->
		136	+ <!--<TabPane label="大表单">-->
		137	+ <!--<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">-->
		138	+ <!--<Form-item label-for="autocomplete" prop="name">-->
		139	+ <!--<span slot="label"><Icon type="ionic"></Icon></span>-->
		140	+ <!--<AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search" size="large"></AutoComplete>-->
		141	+ <!--</Form-item>-->
		142	+ <!--<Form-item label-for="input" label="介绍" prop="desc">-->
		143	+ <!--<Input element-id="input" icon="ios-search" size="large" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>-->
		144	+ <!--</Form-item>-->
		145	+ <!--<Form-item label="邮箱" prop="mail">-->
		146	+ <!--<!–<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>–>-->
		147	+ <!--<ColorPicker v-model="formValidate.mail" size="large"></ColorPicker>-->
		148	+ <!--</Form-item>-->
		149	+ <!--<Form-item label-for="select" label="城市" prop="city">-->
		150	+ <!--<Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地" size="large">-->
		151	+ <!--<Option value="beijing">北京市</Option>-->
		152	+ <!--<Option value="shanghai">上海市</Option>-->
		153	+ <!--<Option value="shenzhen">深圳市</Option>-->
		154	+ <!--</Select>-->
		155	+ <!--</Form-item>-->
		156	+ <!--<Form-item label-for="date" label="选择日期" prop="date">-->
		157	+ <!--<Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date" size="large"></Date-picker>-->
		158	+ <!--</Form-item>-->
		159	+ <!--<Form-item label-for="cascader" label="级联选择" prop="cascader">-->
		160	+ <!--<Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader" size="large"></Cascader>-->
		161	+ <!--</Form-item>-->
96		162
97	- <Form-item label-for="inputnumber" label="数字框" prop="inputnumber">
98	- <InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber" size="small"></InputNumber>
99	- </Form-item>	163	+ <!--<Form-item label-for="inputnumber" label="数字框" prop="inputnumber">-->
		164	+ <!--<InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber" size="large"></InputNumber>-->
		165	+ <!--</Form-item>-->
100		166
101	- <Form-item label="选择日期">
102	- <Row>
103	- <Col span="11">
104	- <Form-item prop="date">
105	- <Date-picker type="date" placeholder="选择日期" v-model="formValidate.date" size="small"></Date-picker>
106	- </Form-item>
107	- </Col>
108	- <Col span="2" style="text-align: center">-</Col>
109	- <Col span="11">
110	- <Form-item prop="time">
111	- <Time-picker type="time" placeholder="选择时间" v-model="formValidate.time" size="small"></Time-picker>
112	- </Form-item>
113	- </Col>
114	- </Row>
115	- </Form-item>
116	- <Form-item label="性别" prop="gender">
117	- <Radio-group v-model="formValidate.gender" size="small">
118	- <Radio label="male">男</Radio>
119	- <Radio label="female">女</Radio>
120	- </Radio-group>
121	- </Form-item>
122	- <Form-item label="爱好" prop="interest" size="small">
123	- <Checkbox-group v-model="formValidate.interest">
124	- <Checkbox label="吃饭"></Checkbox>
125	- <Checkbox label="睡觉"></Checkbox>
126	- <Checkbox label="跑步"></Checkbox>
127	- <Checkbox label="看电影"></Checkbox>
128	- </Checkbox-group>
129	- </Form-item>
130	- <Form-item>
131	- <Button type="primary" @click="handleSubmit('formValidate')" size="small" icon="ios-cloud-upload-outline">提交</Button>
132	- <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" size="small" icon="ios-reload">重置</Button>
133	- </Form-item>
134	- </Form>
135	- </TabPane>
136	- <TabPane label="大表单">
137	- <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
138	- <Form-item label-for="autocomplete" prop="name">
139	- <span slot="label"><Icon type="ionic"></Icon></span>
140	- <AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search" size="large"></AutoComplete>
141	- </Form-item>
142	- <Form-item label-for="input" label="介绍" prop="desc">
143	- <Input element-id="input" icon="ios-search" size="large" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
144	- </Form-item>
145	- <Form-item label="邮箱" prop="mail">
146	- <!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
147	- <ColorPicker v-model="formValidate.mail" size="large"></ColorPicker>
148	- </Form-item>
149	- <Form-item label-for="select" label="城市" prop="city">
150	- <Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地" size="large">
151	- <Option value="beijing">北京市</Option>
152	- <Option value="shanghai">上海市</Option>
153	- <Option value="shenzhen">深圳市</Option>
154	- </Select>
155	- </Form-item>
156	- <Form-item label-for="date" label="选择日期" prop="date">
157	- <Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date" size="large"></Date-picker>
158	- </Form-item>
159	- <Form-item label-for="cascader" label="级联选择" prop="cascader">
160	- <Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader" size="large"></Cascader>
161	- </Form-item>	167	+ <!--<Form-item label="选择日期">-->
		168	+ <!--<Row>-->
		169	+ <!--<Col span="11">-->
		170	+ <!--<Form-item prop="date">-->
		171	+ <!--<Date-picker type="date" placeholder="选择日期" v-model="formValidate.date" size="large"></Date-picker>-->
		172	+ <!--</Form-item>-->
		173	+ <!--</Col>-->
		174	+ <!--<Col span="2" style="text-align: center">-</Col>-->
		175	+ <!--<Col span="11">-->
		176	+ <!--<Form-item prop="time">-->
		177	+ <!--<Time-picker type="time" placeholder="选择时间" v-model="formValidate.time" size="large"></Time-picker>-->
		178	+ <!--</Form-item>-->
		179	+ <!--</Col>-->
		180	+ <!--</Row>-->
		181	+ <!--</Form-item>-->
		182	+ <!--<Form-item label="性别" prop="gender">-->
		183	+ <!--<Radio-group v-model="formValidate.gender" size="large">-->
		184	+ <!--<Radio label="male">男</Radio>-->
		185	+ <!--<Radio label="female">女</Radio>-->
		186	+ <!--</Radio-group>-->
		187	+ <!--</Form-item>-->
		188	+ <!--<Form-item label="爱好" prop="interest" size="large">-->
		189	+ <!--<Checkbox-group v-model="formValidate.interest">-->
		190	+ <!--<Checkbox label="吃饭"></Checkbox>-->
		191	+ <!--<Checkbox label="睡觉"></Checkbox>-->
		192	+ <!--<Checkbox label="跑步"></Checkbox>-->
		193	+ <!--<Checkbox label="看电影"></Checkbox>-->
		194	+ <!--</Checkbox-group>-->
		195	+ <!--</Form-item>-->
		196	+ <!--<Form-item>-->
		197	+ <!--<Button type="primary" @click="handleSubmit('formValidate')" size="large" icon="ios-cloud-upload-outline">提交</Button>-->
		198	+ <!--<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" size="large" icon="ios-reload">重置</Button>-->
		199	+ <!--</Form-item>-->
		200	+ <!--</Form>-->
		201	+ <!--</TabPane>-->
		202	+ <!--</Tabs>-->
162		203
163	- <Form-item label-for="inputnumber" label="数字框" prop="inputnumber">
164	- <InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber" size="large"></InputNumber>
165	- </Form-item>
166		204
167	- <Form-item label="选择日期">
168	- <Row>
169	- <Col span="11">
170	- <Form-item prop="date">
171	- <Date-picker type="date" placeholder="选择日期" v-model="formValidate.date" size="large"></Date-picker>
172	- </Form-item>
173	- </Col>
174	- <Col span="2" style="text-align: center">-</Col>
175	- <Col span="11">
176	- <Form-item prop="time">
177	- <Time-picker type="time" placeholder="选择时间" v-model="formValidate.time" size="large"></Time-picker>
178	- </Form-item>
179	- </Col>
180	- </Row>
181	- </Form-item>
182	- <Form-item label="性别" prop="gender">
183	- <Radio-group v-model="formValidate.gender" size="large">
184	- <Radio label="male">男</Radio>
185	- <Radio label="female">女</Radio>
186	- </Radio-group>
187	- </Form-item>
188	- <Form-item label="爱好" prop="interest" size="large">
189	- <Checkbox-group v-model="formValidate.interest">
190	- <Checkbox label="吃饭"></Checkbox>
191	- <Checkbox label="睡觉"></Checkbox>
192	- <Checkbox label="跑步"></Checkbox>
193	- <Checkbox label="看电影"></Checkbox>
194	- </Checkbox-group>
195	- </Form-item>
196	- <Form-item>
197	- <Button type="primary" @click="handleSubmit('formValidate')" size="large" icon="ios-cloud-upload-outline">提交</Button>
198	- <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" size="large" icon="ios-reload">重置</Button>
199	- </Form-item>
200	- </Form>
201	- </TabPane>
202	- </Tabs>	205	+ <!--<div style="margin: 100px">-->
		206	+ <!--<form action="/">-->
		207	+ <!--<Input name="f1"></Input>-->
		208	+ <!--<i-switch name="f2" :true-value="1" :false-value="2"></i-switch>-->
		209	+ <!--<Select v-model="model1" multiple style="width:200px" name="f3">-->
		210	+ <!--<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
		211	+ <!--</Select>-->
		212	+ <!--<AutoComplete-->
		213	+ <!--v-model="value1"-->
		214	+ <!--:data="data1"-->
		215	+ <!--@on-search="handleSearch1"-->
		216	+ <!--placeholder="input here"-->
		217	+ <!--name="f4"-->
		218	+ <!--style="width:200px"></AutoComplete>-->
		219	+ <!--<Slider v-model="value11" name="f5"></Slider>-->
		220	+ <!--<DatePicker type="date" placeholder="选择日期" style="width: 200px" name="f6"></DatePicker>-->
		221	+ <!--<TimePicker type="time" placeholder="选择时间" style="width: 168px" name="f7"></TimePicker>-->
		222	+ <!--<Cascader :data="datac" v-model="valuec" name="f8"></Cascader>-->
		223	+ <!--<Rate v-model="valuer" name="f9"></Rate>-->
		224	+ <!--<ColorPicker v-model="color" name="f10" />-->
		225	+ <!--<button type="submit">test</button>-->
		226	+ <!--</form>-->
		227	+ <!--</div>-->
		228	+ <!--</div>-->
		229	+<!--</template>-->
		230	+<!--<script>-->
		231	+ <!--export default {-->
		232	+ <!--data () {-->
		233	+ <!--return {-->
		234	+ <!--dataCascader: [{-->
		235	+ <!--value: 'beijing',-->
		236	+ <!--label: '北京',-->
		237	+ <!--children: [-->
		238	+ <!--{-->
		239	+ <!--value: 'gugong',-->
		240	+ <!--label: '故宫'-->
		241	+ <!--},-->
		242	+ <!--{-->
		243	+ <!--value: 'tiantan',-->
		244	+ <!--label: '天坛'-->
		245	+ <!--},-->
		246	+ <!--{-->
		247	+ <!--value: 'wangfujing',-->
		248	+ <!--label: '王府井'-->
		249	+ <!--}-->
		250	+ <!--]-->
		251	+ <!--}, {-->
		252	+ <!--value: 'jiangsu',-->
		253	+ <!--label: '江苏',-->
		254	+ <!--children: [-->
		255	+ <!--{-->
		256	+ <!--value: 'nanjing',-->
		257	+ <!--label: '南京',-->
		258	+ <!--children: [-->
		259	+ <!--{-->
		260	+ <!--value: 'fuzimiao',-->
		261	+ <!--label: '夫子庙',-->
		262	+ <!--}-->
		263	+ <!--]-->
		264	+ <!--},-->
		265	+ <!--{-->
		266	+ <!--value: 'suzhou',-->
		267	+ <!--label: '苏州',-->
		268	+ <!--children: [-->
		269	+ <!--{-->
		270	+ <!--value: 'zhuozhengyuan',-->
		271	+ <!--label: '拙政园',-->
		272	+ <!--},-->
		273	+ <!--{-->
		274	+ <!--value: 'shizilin',-->
		275	+ <!--label: '狮子林',-->
		276	+ <!--}-->
		277	+ <!--]-->
		278	+ <!--}-->
		279	+ <!--],-->
		280	+ <!--}],-->
		281	+ <!--color: '#19be6b',-->
		282	+ <!--valuer: 3,-->
		283	+ <!--valuec: [],-->
		284	+ <!--datac: [{-->
		285	+ <!--value: 'beijing',-->
		286	+ <!--label: '北京',-->
		287	+ <!--children: [-->
		288	+ <!--{-->
		289	+ <!--value: 'gugong',-->
		290	+ <!--label: '故宫'-->
		291	+ <!--},-->
		292	+ <!--{-->
		293	+ <!--value: 'tiantan',-->
		294	+ <!--label: '天坛'-->
		295	+ <!--},-->
		296	+ <!--{-->
		297	+ <!--value: 'wangfujing',-->
		298	+ <!--label: '王府井'-->
		299	+ <!--}-->
		300	+ <!--]-->
		301	+ <!--}, {-->
		302	+ <!--value: 'jiangsu',-->
		303	+ <!--label: '江苏',-->
		304	+ <!--children: [-->
		305	+ <!--{-->
		306	+ <!--value: 'nanjing',-->
		307	+ <!--label: '南京',-->
		308	+ <!--children: [-->
		309	+ <!--{-->
		310	+ <!--value: 'fuzimiao',-->
		311	+ <!--label: '夫子庙',-->
		312	+ <!--}-->
		313	+ <!--]-->
		314	+ <!--},-->
		315	+ <!--{-->
		316	+ <!--value: 'suzhou',-->
		317	+ <!--label: '苏州',-->
		318	+ <!--children: [-->
		319	+ <!--{-->
		320	+ <!--value: 'zhuozhengyuan',-->
		321	+ <!--label: '拙政园',-->
		322	+ <!--},-->
		323	+ <!--{-->
		324	+ <!--value: 'shizilin',-->
		325	+ <!--label: '狮子林',-->
		326	+ <!--}-->
		327	+ <!--]-->
		328	+ <!--}-->
		329	+ <!--],-->
		330	+ <!--}],-->
		331	+ <!--value1: '',-->
		332	+ <!--value11: 25,-->
		333	+ <!--data1: [],-->
		334	+ <!--cityList: [-->
		335	+ <!--{-->
		336	+ <!--value: 'beijing',-->
		337	+ <!--label: '北京市'-->
		338	+ <!--},-->
		339	+ <!--{-->
		340	+ <!--value: 'shanghai',-->
		341	+ <!--label: '上海市'-->
		342	+ <!--},-->
		343	+ <!--{-->
		344	+ <!--value: 'shenzhen',-->
		345	+ <!--label: '深圳市'-->
		346	+ <!--},-->
		347	+ <!--{-->
		348	+ <!--value: 'hangzhou',-->
		349	+ <!--label: '杭州市'-->
		350	+ <!--},-->
		351	+ <!--{-->
		352	+ <!--value: 'nanjing',-->
		353	+ <!--label: '南京市'-->
		354	+ <!--},-->
		355	+ <!--{-->
		356	+ <!--value: 'chongqing',-->
		357	+ <!--label: '重庆市'-->
		358	+ <!--}-->
		359	+ <!--],-->
		360	+ <!--model1: [],-->
		361	+ <!--name: '',-->
		362	+ <!--formValidate: {-->
		363	+ <!--name: '',-->
		364	+ <!--mail: '',-->
		365	+ <!--city: '',-->
		366	+ <!--gender: '',-->
		367	+ <!--interest: [],-->
		368	+ <!--date: '',-->
		369	+ <!--time: '',-->
		370	+ <!--desc: '',-->
		371	+ <!--cascader: [],-->
		372	+ <!--inputnumber: 1-->
		373	+ <!--},-->
		374	+ <!--ruleValidate: {-->
		375	+ <!--name: [-->
		376	+ <!--{ required: true, message: '姓名不能为空', trigger: 'change' }-->
		377	+ <!--],-->
		378	+ <!--mail: [-->
		379	+ <!--{ required: true, message: '邮箱不能为空', trigger: 'change' }-->
		380	+ <!--],-->
		381	+ <!--city: [-->
		382	+ <!--{ required: true, message: '请选择城市', trigger: 'change' }-->
		383	+ <!--],-->
		384	+ <!--gender: [-->
		385	+ <!--{ required: true, message: '请选择性别', trigger: 'change' }-->
		386	+ <!--],-->
		387	+ <!--interest: [-->
		388	+ <!--{ required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },-->
		389	+ <!--{ type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }-->
		390	+ <!--],-->
		391	+ <!--date: [-->
		392	+ <!--{ required: true, type: 'date', message: '请选择日期', trigger: 'change' }-->
		393	+ <!--],-->
		394	+ <!--time: [-->
		395	+ <!--{ required: true, type: 'date', message: '请选择时间', trigger: 'change' }-->
		396	+ <!--],-->
		397	+ <!--desc: [-->
		398	+ <!--{ required: true, message: '请输入个人介绍', trigger: 'blur' },-->
		399	+ <!--{ type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' }-->
		400	+ <!--]-->
		401	+ <!--}-->
		402	+ <!--}-->
		403	+ <!--},-->
		404	+ <!--methods: {-->
		405	+ <!--handleSubmit (name) {-->
		406	+ <!--this.$refs[name].validate((valid) => {-->
		407	+ <!--if (valid) {-->
		408	+ <!--this.$Message.success('提交成功!');-->
		409	+ <!--} else {-->
		410	+ <!--this.$Message.error('表单验证失败!');-->
		411	+ <!--}-->
		412	+ <!--})-->
		413	+ <!--},-->
		414	+ <!--handleReset (name) {-->
		415	+ <!--this.$refs[name].resetFields();-->
		416	+ <!--},-->
		417	+ <!--handleSearch1 (value) {-->
		418	+ <!--this.data1 = !value ? [] : [-->
		419	+ <!--value,-->
		420	+ <!--value + value,-->
		421	+ <!--value + value + value-->
		422	+ <!--];-->
		423	+ <!--}-->
		424	+ <!--}-->
		425	+ <!--}-->
		426	+<!--</script>-->
203		427
204		428
205	- <div style="margin: 100px">
206	- <form action="/">
207	- <Input name="f1"></Input>
208	- <i-switch name="f2" :true-value="1" :false-value="2"></i-switch>
209	- <Select v-model="model1" multiple style="width:200px" name="f3">
210	- <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
211	- </Select>
212	- <AutoComplete
213	- v-model="value1"
214	- :data="data1"
215	- @on-search="handleSearch1"
216	- placeholder="input here"
217	- name="f4"
218	- style="width:200px"></AutoComplete>
219	- <Slider v-model="value11" name="f5"></Slider>
220	- <DatePicker type="date" placeholder="选择日期" style="width: 200px" name="f6"></DatePicker>
221	- <TimePicker type="time" placeholder="选择时间" style="width: 168px" name="f7"></TimePicker>
222	- <Cascader :data="datac" v-model="valuec" name="f8"></Cascader>
223	- <Rate v-model="valuer" name="f9"></Rate>
224	- <ColorPicker v-model="color" name="f10" />
225	- <button type="submit">test</button>
226	- </form>
227	- </div>
228	- </div>	429	+<template>
		430	+ <Form :model="formItem" :label-width="80">
		431	+ <FormItem label="Input">
		432	+ <Input v-model="formItem.input" placeholder="Enter something..."></Input>
		433	+ </FormItem>
		434	+ <FormItem label="Select">
		435	+ <Select v-model="formItem.select">
		436	+ <Option value="beijing">New York</Option>
		437	+ <Option value="shanghai">London</Option>
		438	+ <Option value="shenzhen">Sydney</Option>
		439	+ </Select>
		440	+ </FormItem>
		441	+ <FormItem label="DatePicker">
		442	+ <Row>
		443	+ <Col span="11">
		444	+ <DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
		445	+ </Col>
		446	+ <Col span="2" style="text-align: center">-</Col>
		447	+ <Col span="11">
		448	+ <TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker>
		449	+ </Col>
		450	+ </Row>
		451	+ </FormItem>
		452	+ <FormItem label="Radio">
		453	+ <RadioGroup v-model="formItem.radio">
		454	+ <Radio label="male">Male</Radio>
		455	+ <Radio label="female">Female</Radio>
		456	+ </RadioGroup>
		457	+ </FormItem>
		458	+ <FormItem label="Checkbox">
		459	+ <CheckboxGroup v-model="formItem.checkbox">
		460	+ <Checkbox label="Eat"></Checkbox>
		461	+ <Checkbox label="Sleep"></Checkbox>
		462	+ <Checkbox label="Run"></Checkbox>
		463	+ <Checkbox label="Movie"></Checkbox>
		464	+ </CheckboxGroup>
		465	+ </FormItem>
		466	+ <FormItem label="Switch">
		467	+ <i-switch v-model="formItem.switch" size="large">
		468	+ <span slot="open">On</span>
		469	+ <span slot="close">Off</span>
		470	+ </i-switch>
		471	+ </FormItem>
		472	+ <FormItem label="Slider">
		473	+ <Slider v-model="formItem.slider" range></Slider>
		474	+ </FormItem>
		475	+ <FormItem label="Text">
		476	+ <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
		477	+ </FormItem>
		478	+ <FormItem>
		479	+ <Button type="primary">Submit</Button>
		480	+ <Button type="ghost" style="margin-left: 8px">Cancel</Button>
		481	+ </FormItem>
		482	+ </Form>
229	</template>	483	</template>
230	<script>	484	<script>
231	export default {	485	export default {
232	data () {	486	data () {
233	return {	487	return {
234	- dataCascader: [{
235	- value: 'beijing',
236	- label: '北京',
237	- children: [
238	- {
239	- value: 'gugong',
240	- label: '故宫'
241	- },
242	- {
243	- value: 'tiantan',
244	- label: '天坛'
245	- },
246	- {
247	- value: 'wangfujing',
248	- label: '王府井'
249	- }
250	- ]
251	- }, {
252	- value: 'jiangsu',
253	- label: '江苏',
254	- children: [
255	- {
256	- value: 'nanjing',
257	- label: '南京',
258	- children: [
259	- {
260	- value: 'fuzimiao',
261	- label: '夫子庙',
262	- }
263	- ]
264	- },
265	- {
266	- value: 'suzhou',
267	- label: '苏州',
268	- children: [
269	- {
270	- value: 'zhuozhengyuan',
271	- label: '拙政园',
272	- },
273	- {
274	- value: 'shizilin',
275	- label: '狮子林',
276	- }
277	- ]
278	- }
279	- ],
280	- }],
281	- color: '#19be6b',
282	- valuer: 3,
283	- valuec: [],
284	- datac: [{
285	- value: 'beijing',
286	- label: '北京',
287	- children: [
288	- {
289	- value: 'gugong',
290	- label: '故宫'
291	- },
292	- {
293	- value: 'tiantan',
294	- label: '天坛'
295	- },
296	- {
297	- value: 'wangfujing',
298	- label: '王府井'
299	- }
300	- ]
301	- }, {
302	- value: 'jiangsu',
303	- label: '江苏',
304	- children: [
305	- {
306	- value: 'nanjing',
307	- label: '南京',
308	- children: [
309	- {
310	- value: 'fuzimiao',
311	- label: '夫子庙',
312	- }
313	- ]
314	- },
315	- {
316	- value: 'suzhou',
317	- label: '苏州',
318	- children: [
319	- {
320	- value: 'zhuozhengyuan',
321	- label: '拙政园',
322	- },
323	- {
324	- value: 'shizilin',
325	- label: '狮子林',
326	- }
327	- ]
328	- }
329	- ],
330	- }],
331	- value1: '',
332	- value11: 25,
333	- data1: [],
334	- cityList: [
335	- {
336	- value: 'beijing',
337	- label: '北京市'
338	- },
339	- {
340	- value: 'shanghai',
341	- label: '上海市'
342	- },
343	- {
344	- value: 'shenzhen',
345	- label: '深圳市'
346	- },
347	- {
348	- value: 'hangzhou',
349	- label: '杭州市'
350	- },
351	- {
352	- value: 'nanjing',
353	- label: '南京市'
354	- },
355	- {
356	- value: 'chongqing',
357	- label: '重庆市'
358	- }
359	- ],
360	- model1: [],
361	- name: '',
362	- formValidate: {
363	- name: '',
364	- mail: '',
365	- city: '',
366	- gender: '',
367	- interest: [],	488	+ formItem: {
		489	+ input: '',
		490	+ select: '',
		491	+ radio: 'male',
		492	+ checkbox: [],
		493	+ switch: true,
368	date: '',	494	date: '',
369	time: '',	495	time: '',
370	- desc: '',
371	- cascader: [],
372	- inputnumber: 1
373	- },
374	- ruleValidate: {
375	- name: [
376	- { required: true, message: '姓名不能为空', trigger: 'change' }
377	- ],
378	- mail: [
379	- { required: true, message: '邮箱不能为空', trigger: 'change' }
380	- ],
381	- city: [
382	- { required: true, message: '请选择城市', trigger: 'change' }
383	- ],
384	- gender: [
385	- { required: true, message: '请选择性别', trigger: 'change' }
386	- ],
387	- interest: [
388	- { required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },
389	- { type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }
390	- ],
391	- date: [
392	- { required: true, type: 'date', message: '请选择日期', trigger: 'change' }
393	- ],
394	- time: [
395	- { required: true, type: 'date', message: '请选择时间', trigger: 'change' }
396	- ],
397	- desc: [
398	- { required: true, message: '请输入个人介绍', trigger: 'blur' },
399	- { type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' }
400	- ]	496	+ slider: [20, 50],
		497	+ textarea: ''
401	}	498	}
402	}	499	}
403	- },
404	- methods: {
405	- handleSubmit (name) {
406	- this.$refs[name].validate((valid) => {
407	- if (valid) {
408	- this.$Message.success('提交成功!');
409	- } else {
410	- this.$Message.error('表单验证失败!');
411	- }
412	- })
413	- },
414	- handleReset (name) {
415	- this.$refs[name].resetFields();
416	- },
417	- handleSearch1 (value) {
418	- this.data1 = !value ? [] : [
419	- value,
420	- value + value,
421	- value + value + value
422	- ];
423	- }
424	}	500	}
425	}	501	}
426	</script>	502	</script>