fixed input cls with group & prepend, close #3089

梁灏
1 parent 5bb01822
Showing 2 changed files with 34 additions and 9 deletions Show diff stats
examples/routers/input.vue
src/styles/mixins/input.less
 <template>
     <div>
-        {{ value1 }}
-        <Input v-model="value1" clearable icon="ios-clock-outline" size="large" placeholder="large size"></Input>
+        <Input v-model="value11" size="small">
+            <span slot="prepend">http://</span>
+            <span slot="append">.com</span>
+        </Input>
         <br>
-        <Input v-model="value2" clearable placeholder="default size"></Input>
+        <Input v-model="value12" size="small">
+            <Select v-model="select1" slot="prepend" style="width: 80px">
+                <Option value="http">http://</Option>
+                <Option value="https">https://</Option>
+            </Select>
+            <Select v-model="select2" slot="append" style="width: 70px">
+                <Option value="com">.com</Option>
+                <Option value="org">.org</Option>
+                <Option value="io">.io</Option>
+            </Select>
+        </Input>
         <br>
-        <Input v-model="value3" clearable size="small" placeholder="small size"></Input>
+        <Input v-model="value13" size="small">
+            <Select v-model="select3" slot="prepend" style="width: 80px">
+                <Option value="day">Day</Option>
+                <Option value="month">Month</Option>
+            </Select>
+            <Button slot="append" icon="ios-search"></Button>
+        </Input>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                value1: '',
-                value2: '',
-                value3: ''
+                value11: '',
+                value12: '',
+                value13: '',
+                select1: 'http',
+                select2: 'com',
+                select3: 'day'
             }
         }
     }
@@ -129,11 +129,15 @@
         //    border-radius: 0;
         //}
     }
-    &-with-prepend .@{inputClass} {
+    &-with-prepend .@{inputClass},
+    &-with-prepend&-small .@{inputClass}
+    {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
     }
-    &-with-append .@{inputClass} {
+    &-with-append .@{inputClass},
+    &-with-append&-small .@{inputClass}
+    {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
     }