场景
通过样式穿透修改前端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;
}
}
}
- 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;
}
}
}
- 内嵌过深的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组件设置固定宽高而导致的视图大小变动弹出的计算错误
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);
}
}
