Browse Source

fix:升级样式

lh_hub 3 tháng trước cách đây
mục cha
commit
dd2b7b0d16
2 tập tin đã thay đổi với 45 bổ sung18 xóa
  1. 1 1
      package.json
  2. 44 17
      style/reset-el-input.scss

+ 1 - 1
package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jfcloudvip/front-toolkit",
   "author": "lh_hub <2844316064@qq.com>",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "jfcloud内部前端公共功能工具包",
   "main": "src/index.js",
   "repository": {

+ 44 - 17
style/reset-el-input.scss

@@ -1,16 +1,19 @@
 // form-item 进行校验的时候加上边框颜色
 .is-error {
+
   .el-input.el-input--mini,
   .el-input.el-input--small,
   .el-input.el-input--medium {
     border-color: #ff4d4f;
   }
 }
+
 // input start
 // 处理input禁用样式
 .el-input.is-disabled {
   background-color: #f6f8f9;
 }
+
 // 处理input显示输入字数统计,遮挡文本内容的问题
 .el-input.el-input--mini,
 .el-input.el-input--small,
@@ -20,6 +23,7 @@
   display: inline-flex !important;
   align-items: center;
   overflow: hidden;
+
   input {
     border-width: 0 !important;
     padding: 0 8px !important;
@@ -38,10 +42,6 @@
     white-space: nowrap;
 
     span.el-input__suffix-inner {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-
       .el-input__count-inner {
         // padding-left: 0;
         transform: translate(5px);
@@ -49,34 +49,39 @@
     }
 
     // 处理 clearable 和 show-password 样式冲突
-    span.el-input__suffix-inner:has(.el-icon-view) {
-      padding-left: 5px;
-      white-space: nowrap;
-      display: block;
-    }
+    // span.el-input__suffix-inner:has(.el-icon-view) {
+    //   padding-left: 5px;
+    //   white-space: nowrap;
+    //   display: block;
+    // }
   }
 }
+
 // 设置图标区域的行高
 $sizes: (
   "mini": 28px,
   "small": 32px,
   "medium": 36px,
 );
+
 @each $size, $height in $sizes {
   .el-input--#{$size} {
+
     .el-input__prefix,
     .el-input__suffix {
       height: $height;
       line-height: $height;
+
       .el-input__suffix-inner,
       .el-input-group__append {
         height: $height;
         line-height: $height;
       }
     }
+
     // 前置
-    .el-input-group__prepend ,
-   // 后置
+    .el-input-group__prepend,
+    // 后置
     .el-input-group__append {
       height: $height;
       line-height: $height;
@@ -94,9 +99,10 @@ $sizes: (
     padding: 0 30px 0 15px !important;
     flex: 1;
   }
+
   // 前置
-  .el-input-group__prepend ,
-   // 后置
+  .el-input-group__prepend,
+  // 后置
   .el-input-group__append {
     border-width: 0;
     padding: 0 20px;
@@ -107,6 +113,7 @@ $sizes: (
   .el-input-group__prepend {
     border-right: 1px solid #dcdfe6;
   }
+
   // 后置
   .el-input-group__append {
     border-left: 1px solid #dcdfe6;
@@ -123,19 +130,23 @@ $sizes: (
 // 登录页面输入框有边框
 .login-form {
   .el-form-item {
+
     .el-input.el-input--mini,
     .el-input.el-input--small,
     .el-input.el-input--medium {
       border-width: 0;
+
       input {
         padding: 0 30px 0 15px !important;
       }
     }
-    i.show-password {
+
+    i.ri-eye-off-line {
       top: 0 !important;
     }
   }
 }
+
 // input end
 
 // date-picker start
@@ -145,12 +156,21 @@ $sizes: (
     margin-left: 25px !important;
   }
 }
+
+// 处理前置的问题
+.el-date-editor.el-input--prefix {
+  input {
+    margin-left: 0 !important;
+  }
+}
+
 // 处理时间范围选择组件 placeholder文本被遮挡的问题
 .el-range-editor {
   .el-range-separator {
     width: max-content;
   }
 }
+
 // date-picker end
 
 // textarea start
@@ -159,8 +179,9 @@ $sizes: (
 .el-textarea.el-input--small,
 .el-textarea.el-input--medium {
   position: relative;
-  textarea {
-  }
+
+  textarea {}
+
   .el-input__count {
     position: relative;
     display: block;
@@ -169,6 +190,7 @@ $sizes: (
     text-align: right;
   }
 }
+
 // textarea end
 
 // input-number start
@@ -176,29 +198,34 @@ $sizes: (
   .el-input-number--#{$size} {
     height: $height;
     line-height: $height;
+
     .el-input--#{$size} {
       .el-input__inner {
         padding: 0 calc(#{$height} + 5px) !important;
       }
     }
   }
+
   // 控制器在右侧的时候,会有间隔
   .is-controls-right {
     .el-input--#{$size} {
       height: $height;
       line-height: $height;
+
       .el-input__inner {
         padding: 0 calc(#{$height} + 5px) 0 8px !important;
       }
     }
   }
 }
+
 // input-number end
 
 // 处理单选框的报错 Blocked aria-hidden on an element because its descendant retained focus.
 input[aria-hidden="true"] {
   display: none !important;
 }
+
 .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
   box-shadow: none !important;
-}
+}