Element-plus修改样式

物联网 2024-11-04 17:35:07 阅读次数: 0

场景
通过样式穿透修改前端element组件样式。
注：前面的都是element-plus的修改方法，后面的偏向element-ui多一点，两个element版本分别对应Vue3和Vue2，如果发现改不了，可以查看一下组件类名是不是不一样，修改对应名称即可。
实现
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;
          }
        }
  1. select下拉框
 ::v-deep .el-input__inner{
    
    
	width: 200px;
	height: 3vh;
	color: #fff;
	background-color: transparent;
	border: 1px solid #3b62a1;
	margin: 0 5px;
}
::v-deep .el-input__icon{
    
    
	line-height: 100%;
}
  1. collapse折叠面板
:deep(.el-collapse){
    
    
  border: none;
  overflow-y: hidden;
}
:deep(.el-collapse-item__wrap){
    
    
  background-color: transparent;
  border: none;
}
:deep(.el-collapse-item__header){
    
    
  background-color: #000;
  color: #fff;
  padding-left: 5px;
  height: 30px;
  border: none;
}
:deep(.el-collapse-item__content){
    
    
  background-color: transparent;
  color: rgb(163, 181, 263);
}
  1. Tab 选项卡
 :deep(.el-tabs__item){
    
     //选项属性
	height: 25px;
	line-height: 25px;
	border: none;
}
:deep(.el-tabs--card>.el-tabs__header .el-tabs__nav){
    
     //tab头部
	border-radius: 0;
	border: none;
	background-color: rgb(20, 27, 39);
}
:deep(.el-tabs--card>.el-tabs__header){
    
     //tab头部标签
	border-bottom: 0;
}
:deep(.el-tabs__item.is-active){
    
     //选中状态
	color: #fff;
	background-color: rgb(21, 51, 111);
}
:deep(.el-tab-pane){
    
     //内容
	padding: 0 10px;
	font-size: 12px;
}
  1. el-data-picker时间选择器
::v-deep .el-input__inner{
    
    
	color: rgba(240,240,240,0.5);
	background-color: transparent;
	border: 1px solid #3F7BCF;
	margin: 0 5px;
    .el-range-separator {
    
    
        color: #fff;
    }
}
::v-deep .el-input__icon{
    
    
	line-height: 100%;
}
::v-deep .el-range-input {
    
    
  background: transparent;
  color: rgba(240,240,240,0.5);
}
  1. table表格
::v-deep .el-input .el-input__clear:hover,
::v-deep .el-table th.el-table__cell.is-leaf{
    
    
  color: #fff;
}
::v-deep .el-table th.el-table__cell.is-leaf,
::v-deep .el-table td.el-table__cell{
    
    
  border:none;
}
::v-deep .el-table::before {
    
    
    height: 0 !important;
}
::v-deep .el-table,
::v-deep .el-table tr,
::v-deep .el-input__inner,
::v-deep .el-table td.el-table__cell{
    
    
  background: none;
  color: #fff;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    
    
    background: transparent;
}
::v-deep .el-table th.el-table__cell.is-leaf,
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
    
    
    // background: radial-gradient(  rgba(0,93,177,0.65) 0%, rgba(0,93,177,0.31) 55%, rgba(0,93,177,0.16) 100%);
    background: linear-gradient( 180deg, rgba(0,93,177,0.65) 0%, rgba(0,93,177,0.16) 100%);
}
::v-deep .el-table th.el-table__cell.is-leaf {
    
    
    // background: radial-gradient(  rgba(0,93,177,0.65) 0%, rgba(0,93,177,0.31) 55%, rgba(0,93,177,0.16) 100%);
    background: linear-gradient( 180deg, rgba(0,93,177,0.65) 0%, rgba(0,93,177,0.16) 100%);
}
::v-deep .el-table__body-wrapper {
    
    
	height: 100%;
	overflow-y: auto;
	&::-webkit-scrollbar {
    
    
	  width: 4px; /* y轴滚动条宽度 */
	  height:4px; /* x轴滚动条宽度 */
	  background-color: #f5f5f5; /*滚动条背景*/
	}
}

另外：table 结合内置方法改变th、td样式，隔行变色设置

<el-table
        :data="tableData"
        stripe
        :cell-style="{ textAlign:'center',color:'#F0F0F0',fontSize:'0.16rem',background: 'transparent'}"
        :header-cell-style="{ textAlign:'center',backgroundColor:'#293244',color:'#F0F0F0',fontSize:'0.18rem'}"
        :row-class-name="tableRowClassName"
        class="tablepro-table"
        style="width: 100%;height:100%">
</el-table>

tableRowClassName({
    
     row, rowIndex }) {
    
    
	if (rowIndex % 2 === 1) {
    
    
		return "warning-row";
	} else {
    
    
		return "success-row";
	}
},
...
::v-deep .el-table .warning-row {
    
    
  background: #293244;
}
::v-deep .el-table .success-row {
    
    
  background: transparent;
}
//搭配的样式穿透
::v-deep .el-table__expanded-cell,
::v-deep .el-table,
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
    
    
  background-color: transparent;
}
::v-deep .el-table__row>td{
    
     border: none; }
::v-deep .el-table::before {
    
     height: 0px; } 
::v-deep .el-table th.el-table__cell.is-leaf, ::v-deep .el-table td.el-table__cell{
    
    
  border: none;
}
//table外部包一层.table盒子，盒子设置宽高，el-table内联样式设置宽高100%，最佳自适应
::v-deep .el-table__body-wrapper {
    
    
  height: calc(100% - .5rem);
  overflow-y: auto;
  &::-webkit-scrollbar {
    
    
    width: 4px; /* y轴滚动条宽度 */
    height:4px; /* x轴滚动条宽度 */
    background-color: #f5f5f5; /*滚动条背景*/
  }
}
  1. 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;
  }
}
  1. 分页 (与input框样式冲突，建议修改input宽度在盒子内部进行，亦或是将表格和分页器单独封装成组件，样式隔离)
 ::v-deep .el-pager li {
    
    
    background: none;
    border: 1px solid rgba(255, 255, 255, 1) !important;
    color: rgba(30, 119, 245, 1);
  }
  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
    
    
    background: none;
    border: 1px solid rgba(30, 119, 245, 1) !important;
    color: rgba(30, 119, 245, 1);
  }
  ::v-deep .el-pagination{
    
    
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 0.5rem;
  }
  ::v-deep .el-pagination__total {
    
    
    font-size: .14rem;
    line-height: .3rem;
    color: #F0F0F0;;
  }
  ::v-deep .el-pager li {
    
    
    background: none;
    border-radius: .02rem;
    font-size: .12rem;
    color: #F0F0F0;
    height: .3rem;
    width: .3rem;
    min-width: .3rem;
    margin: 0 .04rem;
    padding: 0;
  }
  ::v-deep .el-pager li:hover {
    
    
    background: none;
    color: #1E77F5;
    height: .3rem;
    width: .3rem;
    min-width: .3rem;
    padding: 0;
    // margin: 0 .04rem;
  }
  ::v-deep .el-pager li.active {
    
    
    background: none;
    color: #1E77F5;
    border: 1px solid rgba(30, 119, 245, 1) !important;
    height: .3rem;
    width: .3rem;
    min-width: .3rem;
  }
  ::v-deep .el-pagination .btn-prev {
    
    
    background: none;
    color: #F0F0F0;
    border: 1px solid #F0F0F0; 
    border-radius: .02rem;
    height: .3rem;
    width: .3rem;
    min-width: .3rem;
    margin: 0 .04rem;
    .el-icon-arrow-left:before {
    
    
      position: relative;
      // right: -0.05rem;
    }
  }
  ::v-deep .el-pagination .btn-next {
    
    
    background: none;
    color: #F0F0F0;
    border: 1px solid #F0F0F0;
    border-radius: .02rem;
    height: .3rem;
    width: .3rem;
    min-width: .3rem;
    margin: 0 .04rem;
    .el-icon-arrow-right:before {
    
    
        position: relative;
        left: -0.05rem;
    }
  }
  ::v-deep .el-pagination span:not([class*=suffix]) {
    
    
    height: 0.3rem;
    line-height: 0.3rem;
  }
  ::v-deep .el-pagination button[disabled="disabled"] {
    
    
    background: none;
    color: #adb3b7;
  }
  ::v-deep .el-pagination__editor.el-input{
    
    
    height: .3rem;
    margin-right: .05rem;
    color: #F0F0F0;
  }
  ::v-deep .el-pagination__jump{
    
    
	  color: #F0F0F0;
  }
  ::v-deep .el-input--medium .el-input__inner,
  ::v-deep .el-pagination__sizes .el-input .el-input__inner {
    
    
    height: 0.34rem !important;
    line-height: 0.34rem !important;
    font-size: .14rem;
  }
  ::v-deep .el-textarea__inner,
  ::v-deep .el-input--small .el-input__inner,
  ::v-deep .el-range-editor--medium.el-input__inner,
  ::v-deep .el-form .el-input--medium .el-input__inner,
  ::v-deep .el-input--medium .el-input__inner{
    
    
    border: 1px solid rgba(63, 123, 207, 1);
  }
  ::v-deep .el-form-item--medium .el-form-item__content{
    
    
    line-height: 0.34rem;
  }
  ::v-deep .cell .el-button {
    
    
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.08rem;
  }
  ::v-deep .cell .el-button--default {
    
    
    color: rgba(30, 119, 245, 1);
  }
  ::v-deep .cell .el-button--danger {
    
    
    color: rgba(255, 68, 55, 1);
  }
  1. 时间选择器
<el-time-picker
	style="width:100%"
	value-format="HH:mm:ss">
</el-time-picker>
  1. 日期选择器
<el-date-picker
	style="width:3.5rem"
	value-format='yyyy-MM-dd'>
</el-date-picker>
  1. 复选框
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    
    
  background-color: #1890ff;
  border-color: #1890ff;
}

复选框与v-for的结合

checkedList:[]

<el-checkbox-group v-model="checkedList">
  <el-checkbox v-for="item in allDeviceList" :key="item.id" :label="item.deviceSn">
	{
   
   {item.nickname}}
  </el-checkbox>
</el-checkbox-group>
  1. 单选框
::v-deep .el-checkbox__label,
::v-deep .el-radio__label{
    
    
  font-family: 'PingFang SC';
  font-weight: 400;
  font-size: 0.16rem;
}

单选框与v-for的结合

<el-radio-group v-model="fileType">
	<el-radio 
	  v-for="item in fileOptions" 
	  :key="item.value"
	  :label="item.value">{
   
   { item.label }}</el-radio>
  </el-radio-group>
  1. 时间线横向滚动 el-timeline
.timelineProcessBox {
    
    
	height: 100%;
	width: 100%;
	.timeline {
    
    
	  padding-top: .39rem;
	  display: flex;
	  width: 100%;
	  height: 100%;
	  overflow-x: auto;
	  // overflow-y: hidden;
	  .lineitem {
    
    
		height: 100%;
		transform: translateX(50%);
		// width: 25%;
		min-width: 1.96rem;
	  }
	}
}
::v-deep .el-timeline-item__tail {
    
    
  border-left: none;
  border-top: 2px solid #e4e7ed;
  width: 100%;
  position: absolute;
  top: .06rem;
}
::v-deep .el-timeline-item__wrapper {
    
    
  padding-left: 0;
  position: absolute;
  top: .1rem;
  transform: translateX(-50%);
  text-align: center;
}
::v-deep .el-timeline-item__timestamp {
    
    
  font-family: 'PingFang SC';
  font-weight: 500;
  font-size: .12rem;
  color: rgba(240,240,240,0.6);
  line-height: .14rem;
  position: absolute;
  top: -.35rem;
  left: 50%;
  transform: translateX(-50%);
  white-space:nowrap;
}
::v-deep .el-timeline-item__content{
    
    
  font-family: 'PingFang SC';
  font-weight: 500;
  font-size: .12rem;
  color: rgba(240,240,240,0.6);
}
.active {
    
    
  ::v-deep .el-timeline-item__node {
    
    
    background-color: #1E77F5;
  }
  ::v-deep .el-timeline-item__tail {
    
    
    border-color: #1E77F5;
  }
}
// 有active样式的下一个li
.active + li {
    
    
  ::v-deep .el-timeline-item__node {
    
    
    background-color: #1E77F5;
  }
}
  1. 开关 el-switch
<el-switch
	class="switchStyle"
	:active-value="1"
	:inactive-value="0"
	active-text="关闭"
	inactive-text="开启"
	active-color="linear-gradient( 180deg, #005DB0 0%, #33B4FD 100%)"
	v-model="switchStatus"
>
//只修改高度的话只需设置.el-switch__core和.el-switch__core:after
::v-deep .switchStyle {
    
    
	  //开关小盒子
	.el-switch__core {
    
    
	  width: .7rem !important;
	  height: .25rem !important;
	  border-radius: .6rem;
	  background: linear-gradient( 180deg, #41688D 0%, #172838 100%); //圆球在左时的开关背景色 只改变内部色，不改变边框色
	  //圆球在右时的开关背景色在html结构中active-color="#67c23a"设置即可
	  border: none;
	}
	  //开关内区域
	.el-switch__label {
    
     
	  position: absolute;
	  padding-top: 1px;
	  display: none;
	  color: #fff;
	  font-size: 10px !important;
	  border: none;
	  //圆球在左的 文字设置
	  &--left {
    
    
		color: #ffffff !important;
		z-index: 1;
		right: 1px;
		font-size: .12rem;
	  }
	  //圆球在右的 文字设置
	  &--right {
    
    
		color: #ffffff !important;
		z-index: 1;
		left: 1px;
		font-size: .12rem;
	  }
	  &.is-active {
    
    
		display: block;
	  }
	}
	  //圆球靠左的 圆球样式
	  .el-switch__core:after {
    
    
	  top: 2%;
	  left: 0%;
	  height: .24rem;
	  width: .24rem;
	  background: linear-gradient( 180deg, #738189 0%, #4F636F 100%);
	  box-shadow: 0px 4px 21px 0px #02274A;
	}
	//圆球靠右的 圆球样式
	&.el-switch.is-checked .el-switch__core::after {
    
    
	  top: 2%;
	  left: 95%;
	  height: .24rem;
	  width: .24rem;
	  background: linear-gradient( 180deg, #738189 0%, #4F636F 100%);
	  box-shadow: 0px 4px 21px 0px #02274A;
	}
}

18.message出现位置样式修改，修改底层

// 引入elementUI组件
import ElementUI from "element-ui";
import "../theme/index.css";
import "@/styles/global.scss";
Vue.use(ElementUI);

const $message = (option) => {
  return ElementUI.Message({
    ...option,
    offset: 70,
  });
};

["success", "warning", "info", "error"].forEach((type) => {
  $message[type] = (option) => {
    if (typeof option === "string") {
      option = {
        message: option,
        offset: 70,
      };
    }
    option.type = type;
    return ElementUI.Message(option);
  };
});
Vue.prototype.$message = $message;

End. 记录一种因书写不规范而导致的报错，因不对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);
}
}

猜你喜欢

转载自blog.csdn.net/daimaxiaodao/article/details/135872248
今日推荐
Electron中的关于静态资源加载问题解决方案
《Cursor-AI编程》基础篇-界面指南
《Cursor-AI编程》基础篇-Tab代码智能补充
《Cursor-AI编程》基础篇-Composer功能详解
《Cursor-AI编程》基础篇-Chat功能详解
《Cursor-AI编程》进阶篇-自定义模型
《Cursor-AI编程》进阶篇-上下文详解
【大模型系列篇】最强检索增强技术GraphRAG基本原理详解
【大模型系列篇】基于Ollama和GraphRAG v2.0.0快速构建知识图谱
解释什么是迁移学习？在 CNN 中如何应用？（面试题200合集，高频、关键）
解释数据增强（Data Augmentation）的概念和方法（（面试题200合集，高频、关键））
揭秘大模型“魔法”：Function Calling 让 AI 不止会说，更能“做”！
周排行
集成学习——LightGBM原理理解
java复制pdf并且往pdf文件中添加内容
DRF的解析器和渲染器 DRF的解析器和渲染器
pytest以函数形式的测试用例
CSS3 边框
C语言编程经典案例，三种方法求水仙花数（附完整代码）
算法题（313）
css如何让背景透明，文字不透明
linux下网络程序遭遇SIGPIPE的解决（转）
用xposed Hook框架Hook 安卓apk的按钮Id
每日归档
更多
2025-04-13(999)
2025-04-12(10529)
2025-04-11(9561)
2025-04-10(1213)
2025-04-09(10354)
2025-04-08(12998)
2025-04-07(0)
2025-04-06(0)
2025-04-05(0)
2025-04-04(0)