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);

}

}

相关推荐
Mintopia5 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李7 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
拾光拾趣录8 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia9 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽10 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器
雲墨款哥11 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob023415 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder20 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder21 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep28 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员