update some styles

update some styles

update some styles
梁灏
1 parent 4a260ed5
Showing 8 changed files with 115 additions and 4 deletions Show diff stats
src/components/form/form-item.vue
src/styles/components/cascader.less
src/styles/components/form.less
src/styles/components/input-number.less
src/styles/components/input.less
src/styles/components/select.less
src/styles/mixins/input.less
test/routers/form.vue
@@ -3,7 +3,7 @@
         <label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label">{{ label }}</label>
         <div :class="[prefixCls + '-content']" :style="contentStyles">
             <slot></slot>
-            <div transition="fade" :class="[prefixCls + '-error']" v-if="validateState === 'error'">{{ validateMessage }}</div>
+            <div transition="fade" :class="[prefixCls + '-error-tip']" v-if="validateState === 'error'">{{ validateMessage }}</div>
         </div>
     </div>
 </template>
@@ -85,3 +85,11 @@
         }
     }
 }
+
+.@{form-item-prefix-cls}-error{
+    .@{cascader-prefix-cls} {
+        &-arrow{
+            color: @error-color;
+        }
+    }
+}
 \ No newline at end of file
@@ -39,6 +39,15 @@
         font-size: @font-size-small;
     }
  
+    &-error-tip{
+        position: absolute;
+        top: 100%;
+        left: 0;
+        line-height: 1;
+        padding-top: 6px;
+        color: @error-color;
+    }
+
     &-required {
         .@{form-item-prefix-cls}-label:before {
             content: '*';
@@ -184,3 +184,12 @@
         }
     }
 }
+
+.@{form-item-prefix-cls}-error {
+    .@{input-number-prefix-cls}{
+        .input-error;
+        &-focused {
+            .active-error;
+        }
+    }
+}
 \ No newline at end of file
@@ -42,4 +42,16 @@
  
 .@{input-prefix-cls}-group{
     .input-group(~"@{input-prefix-cls}");
+}
+
+.@{form-item-prefix-cls}-error{
+    .@{input-prefix-cls}{
+        .input-error;
+        &-icon{
+            color: @error-color;
+        }
+    }
+    .@{input-prefix-cls}-group{
+        .input-group-error;
+    }
 }
 \ No newline at end of file
@@ -217,3 +217,17 @@
         line-height: 30px;
     }
 }
+
+.@{form-item-prefix-cls}-error{
+    .@{select-prefix-cls}{
+        &-selection{
+            border: 1px solid @error-color;
+        }
+        &-arrow{
+            color: @error-color;
+        }
+        &-visible .@{select-prefix-cls}-selection{
+            .active-error;
+        }
+    }
+}
 \ No newline at end of file
 .hover(@color: @input-hover-border-color) {
     border-color: tint(@color, 20%);
 }
+.hover-error() {
+    border-color: @error-color;
+}
  
 .active(@color: @input-hover-border-color) {
     border-color: tint(@color, 20%);
     outline: 0;
     box-shadow: 0 0 0 2px fade(@color, 20%);
 }
+.active-error() {
+    border-color: @error-color;
+    outline: 0;
+    box-shadow: 0 0 0 2px fade(@error-color, 20%);
+}
  
 .disabled() {
     background-color: @input-disabled-bg;
@@ -78,6 +86,16 @@
     }
 }
  
+.input-error() {
+    border: 1px solid @error-color;
+    &:hover {
+        .hover-error;
+    }
+    &:focus {
+        .active-error;
+    }
+}
+
 .input-group(@inputClass) {
     display: table;
     width: 100%;
@@ -214,3 +232,24 @@
         .input-small();
     }
 }
+
+.input-group-error{
+    &-prepend,
+    &-append
+    {
+        background-color: #fff;
+        border: 1px solid @error-color;
+        .@{css-prefix}select {
+            &-selection {
+                background-color: inherit;
+                border: 1px solid transparent;
+            }
+        }
+    }
+    &-prepend {
+        border-right: 0;
+    }
+    &-append {
+        border-left: 0;
+    }
+}
 \ No newline at end of file
@@ -7,10 +7,21 @@
                 </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 :value.sync="form.passwd">
+                    <i-select slot="prepend" style="width: 80px">
+                        <i-option value="http">http://</i-option>
+                        <i-option value="https">https://</i-option>
+                    </i-select>
+                    <i-select slot="append" style="width: 70px">
+                        <i-option value="com">.com</i-option>
+                        <i-option value="org">.org</i-option>
+                        <i-option value="io">.io</i-option>
+                    </i-select>
                 </i-input>
             </form-item>
+            <form-item label="textarea" prop="textarea">
+                <i-input :value.sync="form.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></i-input>
+            </form-item>
             <form-item label="radio" prop="single">
                 <radio :checked.sync="form.single">Single</radio>
             </form-item>
@@ -266,7 +277,8 @@
                     cascader: [],
                     transfer: this.getMockData(),
                     targetKeys1: this.getTargetKeys(),
-                    input: 1
+                    input: 1,
+                    textarea: ''
                 },
                 rules: {
                     mail: [
@@ -351,6 +363,14 @@
                         {
                             type: 'number', min: 1, max: 4
                         }
+                    ],
+                    textarea: [
+                        {
+                            required: true, trigger: 'blur'
+                        },
+                        {
+                            type: 'string', min: 10
+                        }
                     ]
                 }
             }