other / mew-iview

Commit fc0c4c781552c9506ba15cb46520c077c16dd622

Authored by 梁灏
1 parent a9e59197

fixed #494 

watch trigger after form emit, so the value of date not change when
validate, change to async
Showing 2 changed files with 121 additions and 79 deletions   Show diff stats
Inline Side-by-side
examples/routers/form.vue
  Show/Hide comments   View file @fc0c4c7
@@ -169,96 +169,136 @@ @@ -169,96 +169,136 @@
169 <!--</script>--> 169 <!--</script>-->
170 170
171 171
  172 +<!--<template>-->
  173 + <!--<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">-->
  174 + <!--<Form-item label="密码" prop="passwd">-->
  175 + <!--<Input type="password" v-model="formCustom.passwd"></Input>-->
  176 + <!--</Form-item>-->
  177 + <!--<Form-item label="确认密码" prop="passwdCheck">-->
  178 + <!--<Input type="password" v-model="formCustom.passwdCheck"></Input>-->
  179 + <!--</Form-item>-->
  180 + <!--<Form-item label="年龄" prop="age">-->
  181 + <!--<Input type="text" v-model="formCustom.age" number></Input>-->
  182 + <!--</Form-item>-->
  183 + <!--<Form-item>-->
  184 + <!--<Button type="primary" @click="handleSubmit('formCustom')">提交</Button>-->
  185 + <!--<Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>-->
  186 + <!--</Form-item>-->
  187 + <!--</Form>-->
  188 +<!--</template>-->
  189 +<!--<script>-->
  190 + <!--export default {-->
  191 + <!--data () {-->
  192 + <!--const validatePass = (rule, value, callback) => {-->
  193 + <!--if (value === '') {-->
  194 + <!--callback(new Error('请输入密码'));-->
  195 + <!--} else {-->
  196 + <!--if (this.formCustom.passwdCheck !== '') {-->
  197 + <!--// 对第二个密码框单独验证-->
  198 + <!--this.$refs.formCustom.validateField('passwdCheck');-->
  199 + <!--}-->
  200 + <!--callback();-->
  201 + <!--}-->
  202 + <!--};-->
  203 + <!--const validatePassCheck = (rule, value, callback) => {-->
  204 + <!--if (value === '') {-->
  205 + <!--callback(new Error('请再次输入密码'));-->
  206 + <!--} else if (value !== this.formCustom.passwd) {-->
  207 + <!--callback(new Error('两次输入密码不一致!'));-->
  208 + <!--} else {-->
  209 + <!--callback();-->
  210 + <!--}-->
  211 + <!--};-->
  212 + <!--const validateAge = (rule, value, callback) => {-->
  213 + <!--if (!value) {-->
  214 + <!--return callback(new Error('年龄不能为空'));-->
  215 + <!--}-->
  216 + <!--// 模拟异步验证效果-->
  217 + <!--setTimeout(() => {-->
  218 + <!--if (!Number.isInteger(value)) {-->
  219 + <!--callback(new Error('请输入数字值'));-->
  220 + <!--} else {-->
  221 + <!--if (value < 18) {-->
  222 + <!--callback(new Error('必须年满18岁'));-->
  223 + <!--} else {-->
  224 + <!--callback();-->
  225 + <!--}-->
  226 + <!--}-->
  227 + <!--}, 1000);-->
  228 + <!--};-->
  229 +
  230 + <!--return {-->
  231 + <!--formCustom: {-->
  232 + <!--passwd: '',-->
  233 + <!--passwdCheck: '',-->
  234 + <!--age: ''-->
  235 + <!--},-->
  236 + <!--ruleCustom: {-->
  237 + <!--passwd: [-->
  238 + <!--{ validator: validatePass, trigger: 'blur' }-->
  239 + <!--],-->
  240 + <!--passwdCheck: [-->
  241 + <!--{ validator: validatePassCheck, trigger: 'blur' }-->
  242 + <!--],-->
  243 + <!--age: [-->
  244 + <!--{ validator: validateAge, trigger: 'blur' }-->
  245 + <!--]-->
  246 + <!--}-->
  247 + <!--}-->
  248 + <!--},-->
  249 + <!--methods: {-->
  250 + <!--handleSubmit (name) {-->
  251 + <!--this.$refs[name].validate((valid) => {-->
  252 + <!--if (valid) {-->
  253 + <!--this.$Message.success('提交成功!');-->
  254 + <!--} else {-->
  255 + <!--this.$Message.error('表单验证失败!');-->
  256 + <!--}-->
  257 + <!--})-->
  258 + <!--},-->
  259 + <!--handleReset (name) {-->
  260 + <!--this.$refs[name].resetFields();-->
  261 + <!--}-->
  262 + <!--}-->
  263 + <!--}-->
  264 +<!--</script>-->
  265 +
172 <template> 266 <template>
173 - <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">  
174 - <Form-item label="密码" prop="passwd">  
175 - <Input type="password" v-model="formCustom.passwd"></Input>  
176 - </Form-item>  
177 - <Form-item label="确认密码" prop="passwdCheck">  
178 - <Input type="password" v-model="formCustom.passwdCheck"></Input>  
179 - </Form-item>  
180 - <Form-item label="年龄" prop="age">  
181 - <Input type="text" v-model="formCustom.age" number></Input>  
182 - </Form-item>  
183 - <Form-item>  
184 - <Button type="primary" @click="handleSubmit('formCustom')">提交</Button>  
185 - <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>  
186 - </Form-item>  
187 - </Form> 267 + <div>
  268 + <Form ref="DateForm" :model="form" :rules="rules" :label-width="80" style="width: 400px;">
  269 + <Form-item label="选择日期" prop="date">
  270 + <Date-picker v-model="form.date" type="datetime"></Date-picker>
  271 + </Form-item>
  272 + <Form-item>
  273 + <Button type="primary" @click.native="handleClick">确定</Button>
  274 + </Form-item>
  275 + </Form>
  276 + </div>
188 </template> 277 </template>
189 <script> 278 <script>
190 export default { 279 export default {
191 data () { 280 data () {
192 - const validatePass = (rule, value, callback) => {  
193 - if (value === '') {  
194 - callback(new Error('请输入密码'));  
195 - } else {  
196 - if (this.formCustom.passwdCheck !== '') {  
197 - // 对第二个密码框单独验证  
198 - this.$refs.formCustom.validateField('passwdCheck');  
199 - }  
200 - callback();  
201 - }  
202 - };  
203 - const validatePassCheck = (rule, value, callback) => {  
204 - if (value === '') {  
205 - callback(new Error('请再次输入密码'));  
206 - } else if (value !== this.formCustom.passwd) {  
207 - callback(new Error('两次输入密码不一致!'));  
208 - } else {  
209 - callback();  
210 - }  
211 - };  
212 - const validateAge = (rule, value, callback) => {  
213 - if (!value) {  
214 - return callback(new Error('年龄不能为空'));  
215 - }  
216 - // 模拟异步验证效果  
217 - setTimeout(() => {  
218 - if (!Number.isInteger(value)) {  
219 - callback(new Error('请输入数字值'));  
220 - } else {  
221 - if (value < 18) {  
222 - callback(new Error('必须年满18岁'));  
223 - } else {  
224 - callback();  
225 - }  
226 - }  
227 - }, 1000);  
228 - };  
229 -  
230 return { 281 return {
231 - formCustom: {  
232 - passwd: '',  
233 - passwdCheck: '',  
234 - age: '' 282 + form: {
  283 + date: ''
235 }, 284 },
236 - ruleCustom: {  
237 - passwd: [  
238 - { validator: validatePass, trigger: 'blur' }  
239 - ],  
240 - passwdCheck: [  
241 - { validator: validatePassCheck, trigger: 'blur' }  
242 - ],  
243 - age: [  
244 - { validator: validateAge, trigger: 'blur' } 285 + rules: {
  286 + date: [
  287 + { required: true, type: 'date', message: '不能为空', trigger: 'change' },
  288 + { type: 'date', message: '日期格式不正确', trigger: 'change'}
245 ] 289 ]
246 } 290 }
247 } 291 }
248 }, 292 },
249 methods: { 293 methods: {
250 - handleSubmit (name) {  
251 - this.$refs[name].validate((valid) => {  
252 - if (valid) {  
253 - this.$Message.success('提交成功!');  
254 - } else {  
255 - this.$Message.error('表单验证失败!');  
256 - }  
257 - })  
258 - },  
259 - handleReset (name) {  
260 - this.$refs[name].resetFields(); 294 + handleClick() {
  295 + this.$refs.DateForm.validate();
  296 + }
  297 + },
  298 + watch: {
  299 + 'form.date' (val) {
  300 + console.log(val);
261 } 301 }
262 } 302 }
263 } 303 }
264 -</script> 304 -</script>
  305 +</script>
265 \ No newline at end of file 306 \ No newline at end of file
src/components/date-picker/picker.vue
  Show/Hide comments   View file @fc0c4c7
@@ -423,7 +423,9 @@ @@ -423,7 +423,9 @@
423 const newDate = this.formattingDate(date); 423 const newDate = this.formattingDate(date);
424 424
425 this.$emit('on-change', newDate); 425 this.$emit('on-change', newDate);
426 - this.dispatch('FormItem', 'on-form-change', newDate); 426 + this.$nextTick(() => {
  427 + this.dispatch('FormItem', 'on-form-change', newDate);
  428 + });
427 }, 429 },
428 formattingDate (date) { 430 formattingDate (date) {
429 const type = this.type; 431 const type = this.type;