浏览代码

feat:添加el-input的样式重置

lh_hub 3 天之前
父节点
当前提交
8fdabca9c2
共有 3 个文件被更改,包括 174 次插入2 次删除
  1. 8 1
      README.md
  2. 1 1
      package.json
  3. 165 0
      style/reset-el-input.scss

+ 8 - 1
README.md

@@ -27,4 +27,11 @@ setupPlugins:
 
 | **组件**        | **说明**   | **options**                                                  |
 | --------------- | ---------- | ------------------------------------------------------------ |
-| AntiDebugPlugin | 反调试插件 | {  enableAntiDebug:启用反调试   antiDebugKey:内部调试key 默认 jfcloudjfcloud} |
+| AntiDebugPlugin | 反调试插件 | {  enableAntiDebug:启用反调试   antiDebugKey:内部调试key 默认 jfcloudjfcloud} |
+
+
+style: (非导出,自行按照文件结构导入 `@jfcloudvip/front-toolkit/style/...`)
+
+| **组件**        | **说明**                   |
+| --------------- | ----------                 |
+| reset-el-input  | 重置el-input长度显示的位置 |

+ 1 - 1
package.json

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

+ 165 - 0
style/reset-el-input.scss

@@ -0,0 +1,165 @@
+// 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,
+.el-input.el-input--medium {
+  border: 1px solid #dcdfe6;
+  border-radius: 2.5px;
+  display: inline-flex !important;
+  align-items: center;
+  overflow: hidden;
+  input {
+    border-width: 0 !important;
+    padding: 0 0 0 8px !important;
+  }
+  .el-input__suffix {
+    display: block !important;
+    position: relative !important;
+    width: max-content;
+
+    span.el-input__suffix-inner {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+
+      .el-input__count-inner {
+        width: max-content;
+        // padding-left: 0;
+        transform: translate(5px);
+      }
+    }
+  }
+}
+// 设置图标区域的行高
+$sizes: (
+  "mini": 28px,
+  "small": 32px,
+  "medium": 36px,
+);
+@each $size, $height in $sizes {
+  .el-input--#{$size} {
+    .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__append {
+      height: $height;
+      line-height: $height;
+    }
+  }
+}
+
+// input添加了插槽之后的问题
+.el-input.el-input--mini.el-input-group,
+.el-input.el-input--small.el-input-group,
+.el-input.el-input--medium.el-input-group {
+  // display: inline-table !important;
+
+  input {
+    padding: 0 30px 0 15px !important;
+    flex: 1;
+  }
+  // 前置
+  .el-input-group__prepend ,
+   // 后置
+  .el-input-group__append {
+    border-width: 0;
+    padding: 0 20px;
+    width: fit-content;
+  }
+
+  // 前置
+  .el-input-group__prepend {
+    border-right: 1px solid #dcdfe6;
+  }
+  // 后置
+  .el-input-group__append {
+    border-left: 1px solid #dcdfe6;
+  }
+
+  .el-input__suffix {
+    transform: translate(0) !important;
+    width: fit-content;
+    margin-left: -25px;
+    overflow: hidden;
+  }
+}
+
+// 登录页面输入框有边框
+.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.ri-eye-off-line {
+      top: 0 !important;
+    }
+  }
+}
+// input end
+
+// date-picker start
+// 上面的样式会导致时间选择组件icon与文本重叠
+.el-date-editor:not(.el-range-editor) {
+  input {
+    margin-left: 25px !important;
+  }
+}
+// 处理时间范围选择组件 placeholder文本被遮挡的问题
+.el-range-editor {
+  .el-range-separator {
+    width: max-content;
+  }
+}
+// date-picker end
+
+// textarea start
+// 处理文本域显示输入字数统计,遮挡文本内容的问题
+.el-textarea.el-input--mini,
+.el-textarea.el-input--small,
+.el-textarea.el-input--medium {
+  position: relative;
+  textarea {
+  }
+  .el-input__count {
+    position: relative;
+    display: block;
+    bottom: 0;
+    right: 0;
+    text-align: right;
+  }
+}
+// textarea 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;
+}