forminput

Author: HeLinJiang

src/modules/test/add/main.html

@@ -5,15 +5,14 @@
     </button>
 
     <modal title="testtitle">
-        <form-input type="text" name="username" title="用户名" icon="user"></form-input>
-        <form-input type="password" name="password" title="密码" icon="lock"></form-input>
-        <div class="form-group">
-            <input class="form-control" type="text" data-tabindex="1">
-        </div>
-        <div class="form-group">
-            <input class="form-control" type="text" data-tabindex="2">
-        </div>
-        <button class="btn blue" data-toggle="modal" href="#stack2">Launch modal</button>
+
+        <form action="#" class="form-horizontal" role="form">
+            <div class="form-body">
+                <form-input name="username" title="用户名" horizontal></form-input>
+                <form-input type="password" name="password" title="密码" horizontal></form-input>
+            </div>
+        </form>
+        
     </modal>
 
 </div>

src/modules/widget/forminput/main.html

@@ -1,8 +1,15 @@
-<div class="form-group">
+<div class="form-group" v-if="horizontal">
+    <label class="col-md-{{colLeft}} control-label" v-if="!hidetitle">{{ title }}</label>
+    <div class="col-md-{{colRight}}">
+        <input name="{{ name }}" type="{{ type }}" class="form-control" autocomplete="{{autocomplete}}">
+    </div>
+</div>
+
+<div class="form-group" v-else>
     <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
     <label class="control-label visible-ie8 visible-ie9" v-if="!hidetitle">{{ title }}</label>
     <div class="input-icon">
         <i class="fa fa-{{ icon }}" v-if="icon"></i>
-        <input class="form-control placeholder-no-fix" type="{{ type }}" autocomplete="off" placeholder="{{ title }}" name="{{ name }}" />
+        <input name="{{ name }}" type="{{ type }}" class="form-control placeholder-no-fix" autocomplete="{{autocomplete}}" placeholder="{{ title }}" />
     </div>
-</div>
+</div> 

src/modules/widget/forminput/main.js

@@ -37,6 +37,59 @@ Vue.component('form-input', {
             type: String,
             required: true
         },
+
+        'autocomplete': {
+            type: String,
+            'default': 'on'
+        },
+
+        'horizontal': {
+            type: Boolean,
+            'default': false
+        },
+
+        /**
+         * 如果是水平排列的话，则需要定义左右的宽度，格式为x-x，其中x值为1到12
+         */
+        'col': {
+            type: String,
+            'default': '3-9'
+        }
+
+    },
+    computed: {
+        colLeft: function() {
+            var defaultVal = 3,
+                val;
+
+            if (!this.col) {
+                return defaultVal;
+            }
+
+            val = parseInt(this.col.split('-')[0], 10);
+
+            if (isNaN(val) || val < 1 || val > 12) {
+                return defaultVal;
+            } else {
+                return val;
+            }
+        },
+        colRight: function() {
+            var defaultVal = 9,
+                val;
+
+            if (!this.col) {
+                return defaultVal;
+            }
+
+            val = parseInt(this.col.split('-')[1], 10);
+
+            if (isNaN(val) || val < 1 || val > 12) {
+                return defaultVal;
+            } else {
+                return val;
+            }
+        }
     },
     ready: function() {