diff --git a/examples/routers/form.vue b/examples/routers/form.vue index 4ef9bfa..1c02a75 100644 --- a/examples/routers/form.vue +++ b/examples/routers/form.vue @@ -169,96 +169,136 @@ <!--</script>--> +<!--<template>--> + <!--<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">--> + <!--<Form-item label="密码" prop="passwd">--> + <!--<Input type="password" v-model="formCustom.passwd"></Input>--> + <!--</Form-item>--> + <!--<Form-item label="确认密码" prop="passwdCheck">--> + <!--<Input type="password" v-model="formCustom.passwdCheck"></Input>--> + <!--</Form-item>--> + <!--<Form-item label="年龄" prop="age">--> + <!--<Input type="text" v-model="formCustom.age" number></Input>--> + <!--</Form-item>--> + <!--<Form-item>--> + <!--<Button type="primary" @click="handleSubmit('formCustom')">提交</Button>--> + <!--<Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>--> + <!--</Form-item>--> + <!--</Form>--> +<!--</template>--> +<!--<script>--> + <!--export default {--> + <!--data () {--> + <!--const validatePass = (rule, value, callback) => {--> + <!--if (value === '') {--> + <!--callback(new Error('请输入密码'));--> + <!--} else {--> + <!--if (this.formCustom.passwdCheck !== '') {--> + <!--// 对第二个密码框单独验证--> + <!--this.$refs.formCustom.validateField('passwdCheck');--> + <!--}--> + <!--callback();--> + <!--}--> + <!--};--> + <!--const validatePassCheck = (rule, value, callback) => {--> + <!--if (value === '') {--> + <!--callback(new Error('请再次输入密码'));--> + <!--} else if (value !== this.formCustom.passwd) {--> + <!--callback(new Error('两次输入密码不一致!'));--> + <!--} else {--> + <!--callback();--> + <!--}--> + <!--};--> + <!--const validateAge = (rule, value, callback) => {--> + <!--if (!value) {--> + <!--return callback(new Error('年龄不能为空'));--> + <!--}--> + <!--// 模拟异步验证效果--> + <!--setTimeout(() => {--> + <!--if (!Number.isInteger(value)) {--> + <!--callback(new Error('请输入数字值'));--> + <!--} else {--> + <!--if (value < 18) {--> + <!--callback(new Error('必须年满18岁'));--> + <!--} else {--> + <!--callback();--> + <!--}--> + <!--}--> + <!--}, 1000);--> + <!--};--> + + <!--return {--> + <!--formCustom: {--> + <!--passwd: '',--> + <!--passwdCheck: '',--> + <!--age: ''--> + <!--},--> + <!--ruleCustom: {--> + <!--passwd: [--> + <!--{ validator: validatePass, trigger: 'blur' }--> + <!--],--> + <!--passwdCheck: [--> + <!--{ validator: validatePassCheck, trigger: 'blur' }--> + <!--],--> + <!--age: [--> + <!--{ validator: validateAge, trigger: 'blur' }--> + <!--]--> + <!--}--> + <!--}--> + <!--},--> + <!--methods: {--> + <!--handleSubmit (name) {--> + <!--this.$refs[name].validate((valid) => {--> + <!--if (valid) {--> + <!--this.$Message.success('提交成功!');--> + <!--} else {--> + <!--this.$Message.error('表单验证失败!');--> + <!--}--> + <!--})--> + <!--},--> + <!--handleReset (name) {--> + <!--this.$refs[name].resetFields();--> + <!--}--> + <!--}--> + <!--}--> +<!--</script>--> + <template> - <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80"> - <Form-item label="密码" prop="passwd"> - <Input type="password" v-model="formCustom.passwd"></Input> - </Form-item> - <Form-item label="确认密码" prop="passwdCheck"> - <Input type="password" v-model="formCustom.passwdCheck"></Input> - </Form-item> - <Form-item label="年龄" prop="age"> - <Input type="text" v-model="formCustom.age" number></Input> - </Form-item> - <Form-item> - <Button type="primary" @click="handleSubmit('formCustom')">提交</Button> - <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button> - </Form-item> - </Form> + <div> + <Form ref="DateForm" :model="form" :rules="rules" :label-width="80" style="width: 400px;"> + <Form-item label="选择日期" prop="date"> + <Date-picker v-model="form.date" type="datetime"></Date-picker> + </Form-item> + <Form-item> + <Button type="primary" @click.native="handleClick">确定</Button> + </Form-item> + </Form> + </div> </template> <script> export default { data () { - const validatePass = (rule, value, callback) => { - if (value === '') { - callback(new Error('请输入密码')); - } else { - if (this.formCustom.passwdCheck !== '') { - // 对第二个密码框单独验证 - this.$refs.formCustom.validateField('passwdCheck'); - } - callback(); - } - }; - const validatePassCheck = (rule, value, callback) => { - if (value === '') { - callback(new Error('请再次输入密码')); - } else if (value !== this.formCustom.passwd) { - callback(new Error('两次输入密码不一致!')); - } else { - callback(); - } - }; - const validateAge = (rule, value, callback) => { - if (!value) { - return callback(new Error('年龄不能为空')); - } - // 模拟异步验证效果 - setTimeout(() => { - if (!Number.isInteger(value)) { - callback(new Error('请输入数字值')); - } else { - if (value < 18) { - callback(new Error('必须年满18岁')); - } else { - callback(); - } - } - }, 1000); - }; - return { - formCustom: { - passwd: '', - passwdCheck: '', - age: '' + form: { + date: '' }, - ruleCustom: { - passwd: [ - { validator: validatePass, trigger: 'blur' } - ], - passwdCheck: [ - { validator: validatePassCheck, trigger: 'blur' } - ], - age: [ - { validator: validateAge, trigger: 'blur' } + rules: { + date: [ + { required: true, type: 'date', message: '不能为空', trigger: 'change' }, + { type: 'date', message: '日期格式不正确', trigger: 'change'} ] } } }, methods: { - handleSubmit (name) { - this.$refs[name].validate((valid) => { - if (valid) { - this.$Message.success('提交成功!'); - } else { - this.$Message.error('表单验证失败!'); - } - }) - }, - handleReset (name) { - this.$refs[name].resetFields(); + handleClick() { + this.$refs.DateForm.validate(); + } + }, + watch: { + 'form.date' (val) { + console.log(val); } } } -</script> +</script> \ No newline at end of file diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue index e949582..25c411e 100644 --- a/src/components/date-picker/picker.vue +++ b/src/components/date-picker/picker.vue @@ -423,7 +423,9 @@ const newDate = this.formattingDate(date); this.$emit('on-change', newDate); - this.dispatch('FormItem', 'on-form-change', newDate); + this.$nextTick(() => { + this.dispatch('FormItem', 'on-form-change', newDate); + }); }, formattingDate (date) { const type = this.type; -- libgit2 0.21.4