elementUI样式修改记录

最新推荐文章于 2024-05-13 14:30:41 发布

01_Carrortwhisker

最新推荐文章于 2024-05-13 14:30:41 发布

阅读量617

点赞数

分类专栏： elementUI 文章标签： elementui

本文链接：https://blog.csdn.net/a982160311/article/details/123812263

版权

elementUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

表单验证样式
上面是验证样式，下面是非验证样式，主要是为了表单对齐

.el-form-item.is-required > .el-form-item__label:before {
  content: " " !important;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-bottom: 2px !important;
  margin-right: 8px !important;
  background: #f56c6c;
  border-radius: 20px;
}

.el-form-item:not(.is-required) > .el-form-item__label:before {
  content: " " !important;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px !important;
}

效果图：
在这里插入图片描述
el-popover 气泡框

.el-popover[x-placement^=bottom] .popper__arrow {
  /*el-popover上边三角下层的颜色---也就是视觉上的边框*/
  border-bottom-color: #409eff !important;
}

.el-popover[x-placement^=bottom] .popper__arrow::after {
  /*el-popover上边三角表层的颜色---也就是视觉上的角*/
  border-bottom-color: #409eff !important;
}

效果图
在这里插入图片描述
el-calendar日历
结构：

 <el-card class="card">
     <el-calendar>
         <template
                 slot="dateCell"
                 slot-scope="{date, data}">
             <div class="dateContent"
                  :class="[data.isSelected && data.day >= today && data.day <=endDay ? 'hasData' : '', data.day < today || data.day > endDay ? 'goneDay' : '']"
                  @click="changeDate(data)">
                 {{ data.day.split('-').slice(1).join('/') }}
             </div>
         </template>
     </el-calendar>
 </el-card>

样式：

.el-calendar-table .el-calendar-day {
  box-sizing: border-box;
  line-height: 50px;
  padding: 0px !important;
  font-size: 10px;
  text-align: center;
  height: 50px !important;
}

.el-calendar-table td.is-today .dateContent {
  color: #0dd900;
}

.goneDay:hover {
    cursor: not-allowed;
}
.hasData {
    color: #ffffff !important;
    background-color: #6BB2FF;
}
.dateContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.card {
    margin-top: 1%;
    width: 80%;
    height: 100%;
    background-color: #6BB2FF;

    /deep/ .el-card__body {
        margin-top: 1%;
        height: 100%;
        padding: 1px;
    }
}