chenhaodong / mew-iview

Commit 8bca10707b9f9497e34688f5ac02440c46b2387b

Authored by 梁灏
1 parent e011898c

update Input on-form-change trigger timing #198 

update Input on-form-change trigger timing #198
Showing 2 changed files with 28 additions and 486 deletions   Show diff stats
Inline Side-by-side
src/components/input/input.vue
  Show/Hide comments   View file @8bca107
@@ -150,7 +150,6 @@ @@ -150,7 +150,6 @@
150 }, 150 },
151 handleChange (event) { 151 handleChange (event) {
152 this.$emit('on-change', event); 152 this.$emit('on-change', event);
153 - this.$dispatch('on-form-change', this.value);  
154 }, 153 },
155 resizeTextarea () { 154 resizeTextarea () {
156 const autosize = this.autosize; 155 const autosize = this.autosize;
@@ -169,6 +168,7 @@ @@ -169,6 +168,7 @@
169 this.$nextTick(() => { 168 this.$nextTick(() => {
170 this.resizeTextarea(); 169 this.resizeTextarea();
171 }); 170 });
  171 + this.$dispatch('on-form-change', this.value);
172 } 172 }
173 }, 173 },
174 ready () { 174 ready () {
test/routers/form.vue
  Show/Hide comments   View file @8bca107
1 <template> 1 <template>
2 - <div style="width: 600px">  
3 - <i-form v-ref:form-custom :model="formCustom" :rules="ruleCustom" :label-width="80">  
4 - <Form-item label="密码" prop="passwd">  
5 - <i-input type="password" :value.sync="formCustom.passwd"></i-input>  
6 - </Form-item>  
7 - <Form-item label="确认密码" prop="passwdCheck">  
8 - <i-input type="password" :value.sync="formCustom.passwdCheck"></i-input>  
9 - </Form-item>  
10 - <Form-item label="年龄" prop="age">  
11 - <i-input type="text" :value.sync="formCustom.age" number></i-input>  
12 - </Form-item>  
13 - <Form-item>  
14 - <i-button type="primary" @click="handleSubmit('formCustom')">提交</i-button>  
15 - <i-button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</i-button>  
16 - </Form-item>  
17 - </i-form>  
18 -  
19 -  
20 -  
21 - <i-form v-ref:form :model="form" :rules="rules" :label-width="100" label-position="right">  
22 - <form-item label="邮箱" prop="mail">  
23 - <i-input :value.sync="form.mail" placeholder="请输入邮箱">  
24 - <Icon type="ios-email-outline" slot="prepend"></Icon>  
25 - </i-input>  
26 - </form-item>  
27 - <form-item label="密码" prop="passwd">  
28 - <i-input :value.sync="form.passwd">  
29 - <i-select slot="prepend" style="width: 80px">  
30 - <i-option value="http">http://</i-option>  
31 - <i-option value="https">https://</i-option>  
32 - </i-select>  
33 - <i-select slot="append" style="width: 70px">  
34 - <i-option value="com">.com</i-option>  
35 - <i-option value="org">.org</i-option>  
36 - <i-option value="io">.io</i-option>  
37 - </i-select>  
38 - </i-input>  
39 - </form-item>  
40 - <form-item label="textarea" prop="textarea">  
41 - <i-input :value.sync="form.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></i-input>  
42 - </form-item>  
43 - <form-item label="radio" prop="single">  
44 - <radio :checked.sync="form.single">Single</radio>  
45 - </form-item>  
46 - <form-item label="radioGroup" prop="group">  
47 - <Radio-group :model.sync="form.group">  
48 - <Radio value="apple">  
49 - <Icon type="social-apple"></Icon>  
50 - <span>Apple</span>  
51 - </Radio>  
52 - <Radio value="android">  
53 - <Icon type="social-android"></Icon>  
54 - <span>Android</span>  
55 - </Radio>  
56 - <Radio value="windows">  
57 - <Icon type="social-windows"></Icon>  
58 - <span>Windows</span>  
59 - </Radio>  
60 - </Radio-group>  
61 - </form-item>  
62 - <form-item label="checkbox-g" prop="checkboxgroup">  
63 - <Checkbox-group :model.sync="form.checkboxgroup">  
64 - <Checkbox value="twitter">  
65 - <Icon type="social-twitter"></Icon>  
66 - <span>Twitter</span>  
67 - </Checkbox>  
68 - <Checkbox value="facebook">  
69 - <Icon type="social-facebook"></Icon>  
70 - <span>Facebook</span>  
71 - </Checkbox>  
72 - <Checkbox value="github">  
73 - <Icon type="social-github"></Icon>  
74 - <span>Github</span>  
75 - </Checkbox>  
76 - <Checkbox value="snapchat">  
77 - <Icon type="social-snapchat"></Icon>  
78 - <span>Snapchat</span>  
79 - </Checkbox>  
80 - <Checkbox value="twitter">  
81 - <Icon type="social-twitter"></Icon>  
82 - <span>Twitter</span>  
83 - </Checkbox>  
84 - <Checkbox value="facebook">  
85 - <Icon type="social-facebook"></Icon>  
86 - <span>Facebook</span>  
87 - </Checkbox>  
88 - <Checkbox value="github">  
89 - <Icon type="social-github"></Icon>  
90 - <span>Github</span>  
91 - </Checkbox>  
92 - <Checkbox value="snapchat">  
93 - <Icon type="social-snapchat"></Icon>  
94 - <span>Snapchat</span>  
95 - </Checkbox>  
96 - <Checkbox value="twitter">  
97 - <Icon type="social-twitter"></Icon>  
98 - <span>Twitter</span>  
99 - </Checkbox>  
100 - <Checkbox value="facebook">  
101 - <Icon type="social-facebook"></Icon>  
102 - <span>Facebook</span>  
103 - </Checkbox>  
104 - <Checkbox value="github">  
105 - <Icon type="social-github"></Icon>  
106 - <span>Github</span>  
107 - </Checkbox>  
108 - <Checkbox value="snapchat">  
109 - <Icon type="social-snapchat"></Icon>  
110 - <span>Snapchat</span>  
111 - </Checkbox>  
112 - <Checkbox value="twitter">  
113 - <Icon type="social-twitter"></Icon>  
114 - <span>Twitter</span>  
115 - </Checkbox>  
116 - <Checkbox value="facebook">  
117 - <Icon type="social-facebook"></Icon>  
118 - <span>Facebook</span>  
119 - </Checkbox>  
120 - <Checkbox value="github">  
121 - <Icon type="social-github"></Icon>  
122 - <span>Github</span>  
123 - </Checkbox>  
124 - <Checkbox value="snapchat">  
125 - <Icon type="social-snapchat"></Icon>  
126 - <span>Snapchat</span>  
127 - </Checkbox>  
128 - <Checkbox value="twitter">  
129 - <Icon type="social-twitter"></Icon>  
130 - <span>Twitter</span>  
131 - </Checkbox>  
132 - <Checkbox value="facebook">  
133 - <Icon type="social-facebook"></Icon>  
134 - <span>Facebook</span>  
135 - </Checkbox>  
136 - <Checkbox value="github">  
137 - <Icon type="social-github"></Icon>  
138 - <span>Github</span>  
139 - </Checkbox>  
140 - <Checkbox value="snapchat">  
141 - <Icon type="social-snapchat"></Icon>  
142 - <span>Snapchat</span>  
143 - </Checkbox>  
144 - <Checkbox value="twitter">  
145 - <Icon type="social-twitter"></Icon>  
146 - <span>Twitter</span>  
147 - </Checkbox>  
148 - <Checkbox value="facebook">  
149 - <Icon type="social-facebook"></Icon>  
150 - <span>Facebook</span>  
151 - </Checkbox>  
152 - <Checkbox value="github">  
153 - <Icon type="social-github"></Icon>  
154 - <span>Github</span>  
155 - </Checkbox>  
156 - <Checkbox value="snapchat">  
157 - <Icon type="social-snapchat"></Icon>  
158 - <span>Snapchat</span>  
159 - </Checkbox>  
160 - </Checkbox-group>  
161 - </form-item>  
162 - <form-item label="select" prop="select">  
163 - <i-select :model.sync="form.select" style="width:200px" clearable>  
164 - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>  
165 - </i-select>  
166 - <i-select :model.sync="model11" filterable>  
167 - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>  
168 - </i-select>  
169 - <i-select :model.sync="model12" filterable multiple>  
170 - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>  
171 - </i-select>  
172 - </form-item>  
173 - <form-item label="select多选" prop="selectm">  
174 - <i-select :model.sync="form.selectm" multiple style="width:260px">  
175 - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>  
176 - </i-select>  
177 - </form-item>  
178 - <form-item label="多选滑块" prop="slider">  
179 - <Slider :value.sync="form.slider" range></Slider>  
180 - </form-item>  
181 - <form-item label="日期" prop="date">  
182 - <Time-picker :value.sync="form.date" type="time" placeholder="选择时间" style="width: 168px"></Time-picker>  
183 - </form-item>  
184 - <form-item label="两个日期" prop="date2">  
185 - <Date-picker :value.sync="form.date2" type="daterange" placement="bottom-start" placeholder="选择日期" @on-change="c"></Date-picker>  
186 - </form-item>  
187 - <form-item label="级联" prop="cascader">  
188 - <Cascader :data="data" :value.sync="form.cascader"></Cascader>  
189 - </form-item>  
190 - <form-item label="穿梭框" prop="targetKeys1">  
191 - <Transfer  
192 - :data="form.transfer"  
193 - :target-keys="form.targetKeys1"  
194 - :render-format="render1"  
195 - @on-change="handleChange1"></Transfer>  
196 - </form-item>  
197 - <form-item label="数字输入框" prop="input">  
198 - <Input-number :max="10" :min="1" :value.sync="form.input"></Input-number>  
199 - </form-item>  
200 - <form-item>  
201 - <i-button type="primary" @click="onSubmit('form')">提交</i-button>  
202 - <i-button type="ghost" @click="resetForm('form')">重置</i-button>  
203 - </form-item>  
204 - </i-form>  
205 - </div> 2 + <i-form v-ref:form-inline :model="formInline" :rules="ruleInline" inline>
  3 + <Form-item prop="user">
  4 + <i-input type="text" :value.sync="formInline.user" placeholder="Username">
  5 + <Icon type="ios-person-outline" slot="prepend"></Icon>
  6 + </i-input>
  7 + </Form-item>
  8 + <Form-item prop="password">
  9 + <i-input type="password" :value.sync="formInline.password" placeholder="Password">
  10 + <Icon type="ios-locked-outline" slot="prepend"></Icon>
  11 + </i-input>
  12 + </Form-item>
  13 + <Form-item>
  14 + <i-button type="primary" @click="handleSubmit('formInline')">登录</i-button>
  15 + </Form-item>
  16 + </i-form>
206 </template> 17 </template>
207 <script> 18 <script>
208 export default { 19 export default {
209 - props: {},  
210 data () { 20 data () {
211 - const validatePass = (rule, value, callback) => {  
212 - if (value === '') {  
213 - callback(new Error('请输入密码'));  
214 - } else {  
215 - if (this.formCustom.passwdCheck !== '') {  
216 - this.$refs.formCustom.validateField('passwdCheck');  
217 - }  
218 - callback();  
219 - }  
220 - };  
221 - const validatePassCheck = (rule, value, callback) => {  
222 - if (value === '') {  
223 - callback(new Error('请再次输入密码'));  
224 - } else if (value !== this.formCustom.passwd) {  
225 - callback(new Error('两次输入密码不一致!'));  
226 - } else {  
227 - callback();  
228 - }  
229 - };  
230 - const validateAge = (rule, value, callback) => {  
231 - if (!value) {  
232 - return callback(new Error('年龄不能为空'));  
233 - }  
234 - setTimeout(() => {  
235 - if (!Number.isInteger(value)) {  
236 - callback(new Error('请输入数字值'));  
237 - } else {  
238 - if (value < 18) {  
239 - callback(new Error('必须年满18岁'));  
240 - } else {  
241 - callback();  
242 - }  
243 - }  
244 - }, 1000);  
245 - };  
246 -  
247 return { 21 return {
248 - data: [{  
249 - value: 'beijing',  
250 - label: '北京',  
251 - children: [  
252 - {  
253 - value: 'gugong',  
254 - label: '故宫'  
255 - },  
256 - {  
257 - value: 'tiantan',  
258 - label: '天坛'  
259 - },  
260 - {  
261 - value: 'wangfujing',  
262 - label: '王府井'  
263 - }  
264 - ]  
265 - }, {  
266 - value: 'jiangsu',  
267 - label: '江苏',  
268 - children: [  
269 - {  
270 - value: 'nanjing',  
271 - label: '南京',  
272 - children: [  
273 - {  
274 - value: 'fuzimiao',  
275 - label: '夫子庙',  
276 - }  
277 - ]  
278 - },  
279 - {  
280 - value: 'suzhou',  
281 - label: '苏州',  
282 - children: [  
283 - {  
284 - value: 'zhuozhengyuan',  
285 - label: '拙政园',  
286 - },  
287 - {  
288 - value: 'shizilin',  
289 - label: '狮子林',  
290 - }  
291 - ]  
292 - }  
293 - ],  
294 - }],  
295 - cityList: [  
296 - {  
297 - value: 'beijing',  
298 - label: '北京市'  
299 - },  
300 - {  
301 - value: 'shanghai',  
302 - label: '上海市'  
303 - },  
304 - {  
305 - value: 'shenzhen',  
306 - label: '深圳市'  
307 - },  
308 - {  
309 - value: 'hangzhou',  
310 - label: '杭州市'  
311 - },  
312 - {  
313 - value: 'nanjing',  
314 - label: '南京市'  
315 - },  
316 - {  
317 - value: 'chongqing',  
318 - label: '重庆市'  
319 - }  
320 - ],  
321 - form: {  
322 - mail: '',  
323 - passwd: '',  
324 - single: false,  
325 - group: '',  
326 - checkboxgroup: [],  
327 - select: '',  
328 - selectm: [],  
329 - slider: [40, 50],  
330 - date: '',  
331 - date2: '',  
332 - cascader: [],  
333 - transfer: this.getMockData(),  
334 - targetKeys1: this.getTargetKeys(),  
335 - input: 1,  
336 - textarea: ''  
337 - },  
338 - rules: {  
339 - mail: [  
340 - {  
341 - required: true, message: '请输入正确的邮箱', trigger: 'blur', type: 'email'  
342 - },  
343 - {  
344 - min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'  
345 - },  
346 - {  
347 - min: 3, max: 50, message: '长度在 3 到 5 个字符', trigger: 'change'  
348 - }  
349 - ],  
350 - passwd: [  
351 - {  
352 - required: true, message: '请输入密码', trigger: 'blur'  
353 - }  
354 - ],  
355 - group: [  
356 - {  
357 - required: true, message: '请单选组'  
358 - }  
359 - ],  
360 - checkboxgroup: [  
361 - {  
362 - required: true, message: '至少选择2个', min: 2, type: 'array',  
363 - },  
364 - {  
365 - required: true, message: '至多选择3个', max: 3, type: 'array'  
366 - }  
367 - ],  
368 - select: [  
369 - {  
370 - required: true  
371 - }  
372 - ],  
373 - slider: [  
374 - {  
375 - type: 'array', len: 2,  
376 - fields: {  
377 - 0: {  
378 - type: 'number', min: 30, 'message': '不能小于30'  
379 - },  
380 - 1: {  
381 - type: 'number', max: 90, 'message': '不能大于90'  
382 - }  
383 - }  
384 - }  
385 - ],  
386 - date: [  
387 - {  
388 - required: true  
389 - },  
390 - {  
391 - type: 'date'  
392 - }  
393 - ],  
394 - date2: [  
395 - {  
396 - type: 'array', len: 2,  
397 - fields: {  
398 - 0: {  
399 - type: 'date', required: true  
400 - },  
401 - 1: {  
402 - type: 'date', required: true  
403 - }  
404 - }  
405 - }  
406 - ],  
407 - cascader: [  
408 - {  
409 - type: 'array', required: true  
410 - }  
411 - ],  
412 - targetKeys1: [  
413 - {  
414 - type: 'array', min: 8, max: 10  
415 - }  
416 - ],  
417 - input: [  
418 - {  
419 - type: 'number', min: 1, max: 4  
420 - }  
421 - ],  
422 - textarea: [  
423 - {  
424 - required: true, trigger: 'blur'  
425 - },  
426 - {  
427 - type: 'string', min: 10  
428 - }  
429 - ]  
430 - },  
431 - formCustom: {  
432 - passwd: '',  
433 - passwdCheck: '',  
434 - age: '' 22 + formInline: {
  23 + user: '',
  24 + password: ''
435 }, 25 },
436 - ruleCustom: {  
437 - passwd: [  
438 - { validator: validatePass, trigger: 'blur' } 26 + ruleInline: {
  27 + user: [
  28 + { required: true, message: '请填写用户名', trigger: 'change' }
439 ], 29 ],
440 - passwdCheck: [  
441 - { validator: validatePassCheck, trigger: 'blur' }  
442 - ],  
443 - age: [  
444 - { validator: validateAge, trigger: 'blur' } 30 + password: [
  31 + { required: true, message: '请填写密码', trigger: 'blur' },
  32 + { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'change' }
445 ] 33 ]
446 } 34 }
447 } 35 }
448 }, 36 },
449 - computed: {},  
450 methods: { 37 methods: {
451 - onSubmit (formName) {  
452 - this.$refs[formName].validate((valid) => {  
453 - if (valid) {  
454 - this.$Message.success('submit!');  
455 - } else {  
456 - this.$Message.error('error submit!');  
457 - return false;  
458 - }  
459 - });  
460 - },  
461 - resetForm (formName) {  
462 - this.$refs[formName].resetFields();  
463 - },  
464 - c (s) {  
465 - console.log(this.form.date)  
466 - },  
467 - getMockData () {  
468 - let mockData = [];  
469 - for (let i = 1; i <= 20; i++) {  
470 - mockData.push({  
471 - key: i.toString(),  
472 - label: '内容' + i,  
473 - description: '内容' + i + '的描述信息',  
474 - disabled: Math.random() * 3 < 1  
475 - });  
476 - }  
477 - return mockData;  
478 - },  
479 - getTargetKeys () {  
480 - return this.getMockData()  
481 - .filter(() => Math.random() * 2 > 1)  
482 - .map(item => item.key);  
483 - },  
484 - render1 (item) {  
485 - return item.label;  
486 - },  
487 - handleChange1 (newTargetKeys, direction, moveKeys) {  
488 - console.log(newTargetKeys);  
489 - console.log(direction);  
490 - console.log(moveKeys);  
491 - this.form.targetKeys1 = newTargetKeys;  
492 - },  
493 - handleSubmit (name) { 38 + handleSubmit(name) {
494 this.$refs[name].validate((valid) => { 39 this.$refs[name].validate((valid) => {
495 if (valid) { 40 if (valid) {
496 this.$Message.success('提交成功!'); 41 this.$Message.success('提交成功!');
@@ -498,10 +43,7 @@ @@ -498,10 +43,7 @@
498 this.$Message.error('表单验证失败!'); 43 this.$Message.error('表单验证失败!');
499 } 44 }
500 }) 45 })
501 - },  
502 - handleReset (name) {  
503 - this.$refs[name].resetFields();  
504 } 46 }
505 } 47 }
506 - };  
507 -</script>  
508 \ No newline at end of file 48 \ No newline at end of file
  49 + }
  50 +</script>