prevent dispatch form event

when component import an Input, prevent dispatch event from Input to Form

prevent dispatch form event
when component import an Input, prevent dispatch event from Input to Form
梁灏
1 parent 4a5d5cc9
Showing 8 changed files with 92 additions and 54 deletions Show diff stats
examples/routers/form.vue
examples/routers/message.vue
src/components/base/notification/notification.vue
src/components/date-picker/panel/time-range.vue
src/components/date-picker/panel/time.vue
src/components/date-picker/picker.vue
src/components/input/input.vue
src/utils/assist.js
 <template>
-    <i-form ref="formInline" :model="formInline" :rules="ruleInline" inline>
-        <Form-item prop="user">
-            <Input type="text" v-model="formInline.user" placeholder="Username">
-                <Icon type="ios-person-outline" slot="prepend"></Icon>
-            </Input>
-        </Form-item>
-        <Form-item prop="password">
-            <Input type="password" v-model="formInline.password" placeholder="Password">
-                <Icon type="ios-locked-outline" slot="prepend"></Icon>
-            </Input>
-        </Form-item>
-        <Form-item>
-            <Button type="primary" @click.native="handleSubmit('formInline')">登录</Button>
-        </Form-item>
-    </i-form>
+    <div>
+        date: {{ formInline.date }}
+        <i-form ref="formInline" :model="formInline" :rules="ruleInline">
+            <Form-item prop="date">
+                <Date-picker type="date" placeholder="选择日期" v-model="formInline.date"></Date-picker>
+            </Form-item>
+            <Form-item prop="user">
+                <Input v-model="formInline.user">
+            </Form-item>
+            <Form-item>
+                <i-button type="primary" @click.native="handleSubmit('formInline')">登录</i-button>
+            </Form-item>
+        </i-form>
+    </div>
 </template>
 <script>
     export default {
         data () {
             return {
                 formInline: {
-                    user: '',
-                    password: ''
+                    date: new Date(),
+                    user: ''
                 },
                 ruleInline: {
-                    user: [
-                        { required: true, message: '请填写用户名', trigger: 'blur' }
+                    date: [
+                        {
+                            required: true,
+                            type: 'date',
+                            message: '请选择日期',
+                            trigger: 'change'
+                        }
                     ],
-                    password: [
-                        { required: true, message: '请填写密码', trigger: 'blur' },
-                        { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
+                    user: [
+                        {
+                            required: true,
+                            message: '请输入',
+                            trigger: 'change',
+                            min: 10
+                        },
+                        {
+                            required: true,
+                            message: '请输入2',
+                            trigger: 'blur'
+                        }
                     ]
                 }
             }
@@ -38,11 +51,14 @@
             handleSubmit(name) {
                 this.$refs[name].validate((valid) => {
                     if (valid) {
-                        console.log('success');
+                        this.$Message.success('提交成功!');
                     } else {
-                        console.log('fail')
+                        this.$Message.error('表单验证失败!');
                     }
                 })
+            },
+            handleInput (val) {
+                console.log(val)
             }
         }
     }
 <template>
-    <i-button @click.native="time">显示一个10秒的提示</i-button>
+    <div>
+        <i-button @click.native="success">显示成功提示</i-button>
+        <i-button @click.native="warning">显示警告提示</i-button>
+        <i-button @click.native="error">显示错误提示</i-button>
+    </div>
 </template>
 <script>
     export default {
         methods: {
-            time () {
-                this.$Message.info('我将在10秒后消失', 3, () => {
-                    console.log(1111)
-                });
+            success () {
+                this.$Message.success('这是一条成功的提示');
+            },
+            warning () {
+                this.$Message.warning('这是一条警告的提示');
+            },
+            error () {
+                this.$Message.error('对方不想说话，并且向你抛出了一个异常');
             }
-        },
-        mounted () {
-            this.$Message.config({
-                top: 50,
-                duration: 3
-            });
         }
     }
 </script>
@@ -2,7 +2,7 @@
     <div :class="classes" :style="styles">
         <Notice
             v-for="notice in notices"
-            :key="notice"
+            :key="notice.name"
             :prefix-cls="prefixCls"
             :styles="notice.styles"
             :content="notice.content"
@@ -15,7 +15,6 @@
     </div>
 </template>
 <script>
-    // todo :key="notice"
     import Notice from './notice.vue';
     const prefixCls = 'ivu-notification';
@@ -57,6 +57,7 @@
     const timePrefixCls = 'ivu-time-picker';
     export default {
+        name: 'TimePicker',
         mixins: [ Mixin, Locale ],
         components: { TimeSpinner, Confirm },
         data () {
@@ -36,6 +36,7 @@
     const timePrefixCls = 'ivu-time-picker';
     export default {
+        name: 'TimePicker',
         mixins: [ Mixin, Locale ],
         components: { TimeSpinner, Confirm },
         data () {
@@ -139,6 +139,7 @@
     };
     export default {
+        name: 'CalendarPicker',
         mixins: [ Emitter ],
         components: { iInput, Drop },
         directives: { clickoutside },
@@ -344,6 +345,7 @@
                 this.visualValue = correctValue;
                 event.target.value = correctValue;
                 this.internalValue = correctDate;
+                this.currentValue = correctDate;
                 if (correctValue !== oldValue) this.emitChange(correctDate);
             },
@@ -418,6 +420,12 @@
                 this.picker.resetView && this.picker.resetView();
             },
             emitChange (date) {
+                const newDate = this.formattingDate(date);
+
+                this.$emit('on-change', newDate);
+                this.dispatch('FormItem', 'on-form-change', newDate);
+            },
+            formattingDate (date) {
                 const type = this.type;
                 const format = this.format || DEFAULT_FORMATS[type];
                 const formatter = (
@@ -429,9 +437,7 @@
                 if (type === 'daterange' || type === 'timerange') {
                     newDate = [newDate.split(RANGE_SEPARATOR)[0], newDate.split(RANGE_SEPARATOR)[1]];
                 }
-
-                this.$emit('on-change', newDate);
-                this.dispatch('FormItem', 'on-form-change', newDate);
+                return newDate;
             }
         },
         watch: {
@@ -450,7 +456,7 @@
                 if (!val && this.picker && typeof this.picker.handleClear === 'function') {
                     this.picker.handleClear();
                 }
-                this.$emit('input', val);
+//                this.$emit('input', val);
             },
             value (val) {
                 this.currentValue = val;
@@ -492,14 +498,5 @@
         mounted () {
             if (this.open !== null) this.visible = this.open;
         }
-        // todo 事件
-//        events: {
-//            'on-form-blur' () {
-//                return false;
-//            },
-//            'on-form-change' () {
-//                return false;
-//            }
-//        }
     };
 </script>
@@ -43,7 +43,7 @@
     </div>
 </template>
 <script>
-    import { oneOf } from '../../utils/assist';
+    import { oneOf, findComponentUpward } from '../../utils/assist';
     import calcTextareaHeight from '../../utils/calcTextareaHeight';
     import Emitter from '../../mixins/emitter';
@@ -152,7 +152,9 @@
             },
             handleBlur () {
                 this.$emit('on-blur');
-                this.dispatch('FormItem', 'on-form-blur', this.currentValue);
+                if (!findComponentUpward(this, ['DatePicker', 'TimePicker'])) {
+                    this.dispatch('FormItem', 'on-form-blur', this.currentValue);
+                }
             },
             handleInput (event) {
                 const value = event.target.value;
@@ -169,7 +171,9 @@
                     this.resizeTextarea();
                 });
                 this.currentValue = value;
-                this.dispatch('FormItem', 'on-form-change', value);
+                if (!findComponentUpward(this, ['DatePicker', 'TimePicker'])) {
+                    this.dispatch('FormItem', 'on-form-change', value);
+                }
             },
             resizeTextarea () {
                 const autosize = this.autosize;
@@ -165,4 +165,22 @@ export function scrollTop(el, from = 0, to, duration = 500) {
         window.requestAnimationFrame(() => scroll(d, end, step));
     }
     scroll(from, to, step);
-}
 \ No newline at end of file
+}
+
+// Find components upward
+function findComponentUpward (content, componentName, componentNames) {
+    if (typeof componentName === 'string') {
+        componentNames = [componentName];
+    } else {
+        componentNames = componentName;
+    }
+
+    let parent = content.$parent;
+    let name = parent.$options.name;
+    while (parent && (!name || componentNames.indexOf(name) < 0)) {
+        parent = parent.$parent;
+        if (parent) name = parent.$options.name;
+    }
+    return parent;
+}
+export {findComponentUpward};
 \ No newline at end of file