Element-plus修改样式

场景

通过样式穿透修改前端element组件样式。
实现

1.button按钮

::v-deep .el-button {

border-radius: 0;

border: 0;

background-color: rgba(0, 194, 255) !important;

color: black;

}

2.form表单

::v-deep .el-form {

text-align: left;

.el-form-item {

text-align: left;

.el-form-item__label {

color: skyblue;

text-align: left;

}

.el-form-item__content {

color: skyblue;

text-align: left;

}

}

}

  1. input

::v-deep .el-input {

width: 300px;

border: none;

.el-input__wrapper {

background-color: transparent !important;

border: none;

// border-color: rgba(37, 65, 125, 1) !important;

.el-input__inner {

color: skyblue;

}

}

}

  1. 内嵌过深的input以及type="textarea"的input

.el-input {

:deep(.el-input__wrapper) {

box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;

// 去除input白色边框

--el-input-text-color: skyblue; // 修改input输入框字体颜色

--el-input-icon-color: rgb(208, 192, 192); // 修改icon颜色

}

}
.el-textarea{

:deep(.el-textarea__inner) {

box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;

// 去除input白色边框

--el-input-text-color: skyblue; // 修改input输入框字体颜色

--el-input-icon-color: rgb(208, 192, 192); // 修改icon颜色

background-color: transparent !important;

resize: none;

}

}

5.table内部加入透明滚动条

::v-deep .el-table__inner-wrapper {

overflow-y: auto;

&::-webkit-scrollbar {

width: 4px; /* y轴滚动条宽度 /
height:4px; /
x轴滚动条宽度 */

background-color: #f5f5f5; /滚动条背景 /

}

另一种改变滚动条样式的方法:

:deep(.gantt_layout_content .gantt_task_vscroll) {

&::-webkit-scrollbar {

width: 14px;

height: 14px;

}

&::-webkit-scrollbar-thumb {

background-color: #345a75;

border-radius: 10px;

}

&::-webkit-scrollbar-track {

background-color: transparent;

}

}

最后,记录一种常见的报错,因不对element组件设置固定宽高而导致的视图大小变动弹出的计算错误

c 复制代码
ResizeObserver loop completed with undelivered notifications.

解决办法是将下列代码放置在引用该页面的父组件中,习惯放在js最后一行:

const debounce = (fn, delay) => {

let timer = null;

return function () {

let context = this;

let args = arguments;

clearTimeout(timer);

timer = setTimeout(function () {

fn.apply(context, args);

}, delay);

}

}

const _ResizeObserver = window.ResizeObserver;

window.ResizeObserver = class ResizeObserver extends _ResizeObserver{

constructor(callback) {

callback = debounce(callback, 16);

super(callback);

}

}

相关推荐
zwjapple6 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem8 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊9 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术9 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理9 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing9 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止9 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall9 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴9 小时前
简单入门Python装饰器
前端·python