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 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 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 277 </template>
189 278 <script>
190 279 export default {
191 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 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 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 304 -</script>
  305 +</script>
265 306 \ No newline at end of file
... ...
src/components/date-picker/picker.vue
  Show/Hide comments   View file @fc0c4c7
... ... @@ -423,7 +423,9 @@
423 423 const newDate = this.formattingDate(date);
424 424  
425 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 430 formattingDate (date) {
429 431 const type = this.type;
... ...