element plus自定义样式

最新推荐文章于 2024-05-20 19:54:38 发布

十友九

最新推荐文章于 2024-05-20 19:54:38 发布

阅读量472

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43778556/article/details/133856136

版权

Steps 步骤条

在这里插入图片描述

<el-steps :active="step" style="width:500px">
     <el-step :title="$t('wslang786')" />
     <el-step :title="$t('wslang768')" />
     <el-step :title="$t('wslang359')" />
     <el-step :title="$t('wslang414')" />
 </el-steps>

:deep(.el-step__title.is-finish) {
    /* 设置当前步骤的状态 */
    color: var(--color-1);
}

:deep(.el-step__head.is-finish) {
    /* 设置当前激活步骤 */
    color: var(--color-1);
    border-color: var(--color-1);
}

Checkbox 多选框

在这里插入图片描述

<el-checkbox v-model="formData.isCompany" :label="$t('wslang775')" size="large" :true-label="1" :false-label="0"/>

 /* 设置带边框的checkbox，选中后边框的颜色 */
 :deep(.is-bordered.is-checked) {
     border-color: var(--color-1);
 }

 /* 设置选中后的文字颜色 */
 :deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
     color: var(--color-1);
 }

 /* 设置选中后对勾框的边框和背景颜色 */
 :deep(.el-checkbox__input.is-checked .el-checkbox__inner,
     .el-checkbox__input.is-indeterminate .el-checkbox__inner) {
     border-color: var(--color-1);
     background-color: var(--color-1);
 }

 /* 设置checkbox获得焦点后，对勾框的边框颜色 */
 :deep(.el-checkbox__input.is-focus .el-checkbox__inner) {
     /* border-color: #FF0000; */
 }

 /* 设置鼠标经过对勾框，对勾框边框的颜色 */
 :deep(.el-checkbox__inner):hover {
     border-color: var(--color-1);
 }

Radio 单选框

在这里插入图片描述

<el-radio-group v-model="agreeCheck" class="ml-4">
     <el-radio :label="true" size="large">{{$t('wslang858')}}</el-radio>
     <el-radio :label="false" size="large">{{$t('wslang859')}}</el-radio>
 </el-radio-group>

:deep(.el-radio.is-bordered.is-checked) {
    color: var(--color-1);
    border-color: var(--color-1);
}

:deep(.el-radio__input.is-checked + .el-radio__label) {
    color: var(--color-1);
    border-color: var(--color-1);
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
    background: var(--color-1);
    border-color: var(--color-1);
}

Pagination 分页

在这里插入图片描述

<el-pagination background layout="prev,pager,next,jumper" :page-size="page.pageSize"
   v-model:current-page="page.pageNum" @next-click="getList()" @prev-click="getList()"
   @current-change="changePage" :total="page.total" />


:deep(.el-pagination.is-background .el-pager li):hover {
     color: var(--color-1);
     /*hover时候的文字颜色*/
 }
 :deep(.el-pager li).active {
     color: #fff;
     /*仅设置active时的文字颜色*/
     background-color:var(--color-1);
 }
 :deep(.el-pagination.is-background .el-pager li.is-active){
    background-color:var(--color-1);
    color: #fff;
 }
 :deep(.el-pagination.is-background .btn-prev):hover{
    color: var(--color-1);
 }
 :deep(.el-pagination.is-background .btn-next):hover{
    color: var(--color-1);
 }