other / mew-iview

Commit 21acf032acb2139385e3485f22a7fc1fdddf3d6d

Authored by 梁灏
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 + <!--&lt;!&ndash;<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>&ndash;&gt;-->
  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 + <!--&lt;!&ndash;<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>&ndash;&gt;-->
  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 + <!--&lt;!&ndash;<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>&ndash;&gt;-->
  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 483 </template>
230 484 <script>
231 485 export default {
232 486 data () {
233 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 494 date: '',
369 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 502 </script>
... ...