support Form

support Form

src/components/form/form-item.vue

@@ -3,7 +3,9 @@
         <label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label"><slot name="label">{{ label }}</slot></label>
         <div :class="[prefixCls + '-content']" :style="contentStyles">
             <slot></slot>
-            <div transition="fade" :class="[prefixCls + '-error-tip']" v-if="validateState === 'error' && showMessage && form.showMessage">{{ validateMessage }}</div>
+            <transition name="fade">
+                <div :class="[prefixCls + '-error-tip']" v-if="validateState === 'error' && showMessage && form.showMessage">{{ validateMessage }}</div>
+            </transition>
         </div>
     </div>
 </template>
@@ -11,6 +13,7 @@
     // https://github.com/ElemeFE/element/blob/dev/packages/form/src/form-item.vue
 
     import AsyncValidator from 'async-validator';
+    import Emitter from '../../mixins/emitter';
 
     const prefixCls = 'ivu-form-item';
 
@@ -38,6 +41,8 @@
     }
 
     export default {
+        name: 'FormItem',
+        mixins: [ Emitter ],
         props: {
             label: {
                 type: String,
@@ -206,9 +211,9 @@
                 this.validate('change');
             }
         },
-        ready () {
+        mounted () {
             if (this.prop) {
-                this.$dispatch('on-form-item-add', this);
+                this.dispatch('iForm', 'on-form-item-add', this);
 
                 Object.defineProperty(this, 'initialValue', {
                     value: this.fieldValue
@@ -229,7 +234,7 @@
             }
         },
         beforeDestroy () {
-            this.$dispatch('on-form-item-remove', this);
+            this.dispatch('iForm', 'on-form-item-remove', this);
         }
     };
 </script>

src/components/form/form.vue

@@ -82,15 +82,15 @@
                 this.validate();
             }
         },
-        events: {
-            'on-form-item-add' (field) {
+        created () {
+            this.$on('on-form-item-add', (field) => {
                 if (field) this.fields.push(field);
                 return false;
-            },
-            'on-form-item-remove' (field) {
+            });
+            this.$on('on-form-item-remove', (field) => {
                 if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
                 return false;
-            }
+            });
         }
     };
 </script>

src/index.js

@@ -15,7 +15,7 @@ import Circle from './components/circle';
 import Collapse from './components/collapse';
 import DatePicker from './components/date-picker';
 import Dropdown from './components/dropdown';
-// import Form from './components/form';
+import Form from './components/form';
 import Icon from './components/icon';
 import Input from './components/input';
 import InputNumber from './components/input-number';
@@ -67,8 +67,8 @@ const iview = {
     Dropdown,
     DropdownItem: Dropdown.Item,
     DropdownMenu: Dropdown.Menu,
-    // iForm: Form,
-    // FormItem: Form.Item,
+    iForm: Form,
+    FormItem: Form.Item,
     iCol: Col,
     Collapse,
     Icon,