update Form

update Form

src/components/form/form-item.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="classes">
         <label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label">{{ label }}</label>
-        <div :style="contentStyles">
+        <div :class="[prefixCls + '-content']" :style="contentStyles">
             <slot></slot>
             <div transition="fade" :class="[prefixCls + '-error']" v-if="validateState === 'error'">{{ validateMessage }}</div>
         </div>

src/components/form/form.vue

@@ -3,6 +3,7 @@
 </template>
 <script>
     // https://github.com/ElemeFE/element/blob/dev/packages/form/src/form.vue
+    import { oneOf } from '../../utils/assist';
 
     const prefixCls = 'ivu-form';
 
@@ -18,6 +19,12 @@
             labelWidth: {
                 type: Number
             },
+            labelPosition: {
+                validator (value) {
+                    return oneOf(value, ['left', 'right', 'top']);
+                },
+                default: 'right'
+            },
             inline: {
                 type: Boolean,
                 default: false
@@ -32,6 +39,7 @@
             classes () {
                 return [
                     `${prefixCls}`,
+                    `${prefixCls}-label-${this.labelPosition}`,
                     {
                         [`${prefixCls}-inline`]: this.inline
                     }

src/styles/components/form.less

@@ -1 +1,56 @@
 @form-prefix-cls: ~"@{css-prefix}form";
+@form-item-prefix-cls: ~"@{form-prefix-cls}-item";
+
+.@{form-prefix-cls} {
+    .@{form-item-prefix-cls}-label {
+        text-align: right;
+        vertical-align: middle;
+        float: left;
+        font-size: @font-size-small;
+        color: @text-color;
+        line-height: 1;
+        padding: 10px 12px 10px 0;
+        box-sizing: border-box;
+    }
+    &-label-left .@{form-item-prefix-cls}-label {
+        text-align: left;
+    }
+    &-label-top .@{form-item-prefix-cls}-label {
+        float: none;
+        display: inline-block;
+        padding: 0 0 10px 0;
+    }
+    &-inline{
+        .@{form-item-prefix-cls} {
+            display: inline-block;
+            margin-right: 10px;
+            vertical-align: top;
+        }
+    }
+}
+
+.@{form-item-prefix-cls} {
+    margin-bottom: 24px;
+    vertical-align: top;
+    .clearfix();
+    &-content {
+        position: relative;
+        line-height: 32px;
+        font-size: @font-size-small;
+    }
+
+    &-required {
+        .@{form-item-prefix-cls}-label:before {
+            content: '*';
+            display: inline-block;
+            margin-right: 4px;
+            line-height: 1;
+            font-family: SimSun;
+            font-size: @font-size-small;
+            color: @error-color;
+        }
+    }
+    &-error {
+        // todo
+    }
+}

test/routers/form.vue

@@ -1,7 +1,19 @@
 <template>
-    <div>
+    <div style="width: 400px">
-        <i-form>
+        <i-form v-ref:form :model="form" :rules="rules" :label-width="50" label-position="right">
-
+            <form-item label="邮箱" prop="mail">
+                <i-input :value.sync="form.mail" placeholder="请输入邮箱">
+                    <Icon type="ios-email-outline" slot="prepend"></Icon>
+                </i-input>
+            </form-item>
+            <form-item label="密码" prop="passwd">
+                <i-input type="password" :value.sync="form.passwd" placeholder="请输入密码">
+                    <Icon type="ios-locked-outline" slot="prepend"></Icon>
+                </i-input>
+            </form-item>
+            <form-item>
+                <i-button type="primary" @click="onSubmit('form')">提交</i-button>
+            </form-item>
         </i-form>
     </div>
 </template>
@@ -9,9 +21,40 @@
     export default {
         props: {},
         data () {
-            return {}
+            return {
+                form: {
+                    mail: '',
+                    passwd: ''
+                },
+                rules: {
+                    mail: [
+                        {
+                            required: true, message: '请输入邮箱', trigger: 'blur'
+                        },
+                        {
+                            min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'
+                        }
+                    ],
+                    passwd: [
+                        {
+                            required: true, message: '请输入密码', trigger: 'blur'
+                        }
+                    ]
+                }
+            }
         },
         computed: {},
-        methods: {}
+        methods: {
+            onSubmit (formName) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        this.$Message.success('submit!');
+                    } else {
+                        this.$Message.error('error submit!');
+                        return false;
+                    }
+                });
+            }
+        }
     };
 </script>