Kaynağa Gözat

fix input-group style

baiyaaaaa 8 yıl önce
ebeveyn
işleme
db666dfb4b

+ 4 - 2
packages/input/src/input.vue

@@ -4,7 +4,9 @@
     size ? 'el-input--' + size : '',
     {
       'is-disabled': disabled,
-      'el-input-group': $slots.prepend || $slots.append
+      'el-input-group': $slots.prepend || $slots.append,
+      'el-input-group--append': $slots.append,
+      'el-input-group--prepend': $slots.prepend
     }
   ]">
     <template v-if="type !== 'textarea'">
@@ -13,7 +15,7 @@
         <slot name="prepend"></slot>
       </div>
       <!-- input 图标 -->
-      <i class="el-input__icon" :class="[icon ? 'el-icon-' + icon : '']" v-if="icon" @click="handleIconClick"></i>
+      <i class="el-input__icon" :class="'el-icon-' + icon" v-if="icon" @click="handleIconClick"></i>
       <input
         v-if="type !== 'textarea'"
         class="el-input__inner"

+ 11 - 9
packages/theme-default/src/input.css

@@ -150,16 +150,18 @@
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
-    & .el-input__inner:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    & .el-input__inner:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+
+    @m prepend {
+      .el-input__inner {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
     }
-    & .el-input__inner:not(:first-child):not(:last-child) {
-      border-radius: 0;
+    @m append {
+      .el-input__inner {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
     }
   }