diff --git a/README.md b/README.md
index 2824bc35..b1d1bc83 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@
- [x] InputNumber
- [x] Rate
- [x] Upload
-- [ ] Form
+- [x] Form
- [x] Alert
- [x] Card
- [ ] Message
diff --git a/examples/app.vue b/examples/app.vue
index 9d305756..60183faf 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -48,6 +48,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
Page
Transfer
Date
+ Form
diff --git a/examples/main.js b/examples/main.js
index c77659b3..99f08700 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -42,12 +42,12 @@ const router = new VueRouter({
component: require('./routers/checkbox.vue')
},
{
- path: '/steps',
- component: require('./routers/steps.vue')
+ path: '/steps',
+ component: require('./routers/steps.vue')
},
{
- path: '/timeline',
- component: require('./routers/timeline.vue')
+ path: '/timeline',
+ component: require('./routers/timeline.vue')
},
{
path: '/switch',
@@ -156,7 +156,11 @@ const router = new VueRouter({
{
path: '/date',
component: require('./routers/date.vue')
- }
+ },
+ {
+ path: '/form',
+ component: require('./routers/form.vue')
+ },
]
});
diff --git a/examples/routers/form.vue b/examples/routers/form.vue
index ba1484e1..472b44ec 100644
--- a/examples/routers/form.vue
+++ b/examples/routers/form.vue
@@ -1,21 +1,17 @@
-
-
-
+
+
+
+
+
-
-
- Ajax
-
-
-
- :
-
-
+
+
+
+
- 提交
- 重置
+
@@ -23,27 +19,30 @@
export default {
data () {
return {
- formValidate: {
- input: '123',
- ajax: true
+ formInline: {
+ user: '',
+ password: ''
},
- ruleValidate: {
-
+ ruleInline: {
+ user: [
+ { required: true, message: '请填写用户名', trigger: 'blur' }
+ ],
+ password: [
+ { required: true, message: '请填写密码', trigger: 'blur' },
+ { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
+ ]
}
}
},
methods: {
- handleSubmit (name) {
+ handleSubmit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
- this.$Message.success('提交成功!');
+ console.log('success');
} else {
- this.$Message.error('表单验证失败!');
+ console.log('fail')
}
})
- },
- handleReset (name) {
- this.$refs[name].resetFields();
}
}
}
diff --git a/src/components/form/form-item.vue b/src/components/form/form-item.vue
index bb44f6fc..d64c9b65 100644
--- a/src/components/form/form-item.vue
+++ b/src/components/form/form-item.vue
@@ -3,7 +3,9 @@
-
{{ validateMessage }}
+
+ {{ validateMessage }}
+
@@ -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);
}
};
\ No newline at end of file
diff --git a/src/components/form/form.vue b/src/components/form/form.vue
index 65eeec8a..98f4614c 100644
--- a/src/components/form/form.vue
+++ b/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;
- }
+ });
}
};
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 6e59fb02..5eab2e88 100644
--- a/src/index.js
+++ b/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,