浏览代码

fix:修改重置el-input样式,处理 clearable 和 show-password 样式冲突,以及前置图标样式

lh_hub 1 周之前
父节点
当前提交
e63b27f1bd
共有 1 个文件被更改,包括 18 次插入2 次删除
  1. 18 2
      style/reset-el-input.scss

+ 18 - 2
style/reset-el-input.scss

@@ -22,12 +22,20 @@
   overflow: hidden;
   input {
     border-width: 0 !important;
-    padding: 0 0 0 8px !important;
+    padding: 0 8px !important;
   }
+
+  // 前置图标处理
+  &:has(.el-input__prefix) {
+    padding-left: 30px;
+    box-sizing: border-box;
+  }
+
   .el-input__suffix {
     display: block !important;
     position: relative !important;
     width: max-content;
+    white-space: nowrap;
 
     span.el-input__suffix-inner {
       display: flex;
@@ -35,11 +43,17 @@
       align-items: flex-end;
 
       .el-input__count-inner {
-        width: max-content;
         // padding-left: 0;
         transform: translate(5px);
       }
     }
+
+    // 处理 clearable 和 show-password 样式冲突
+    span.el-input__suffix-inner:has(.el-icon-view) {
+      padding-left: 5px;
+      white-space: nowrap;
+      display: block;
+    }
   }
 }
 // 设置图标区域的行高
@@ -50,6 +64,7 @@ $sizes: (
 );
 @each $size, $height in $sizes {
   .el-input--#{$size} {
+    .el-input__prefix,
     .el-input__suffix {
       height: $height;
       line-height: $height;
@@ -155,6 +170,7 @@ $sizes: (
   }
 }
 // textarea end
+
 // input-number start
 @each $size, $height in $sizes {
   .el-input-number--#{$size} {