UI美化小贴士本文主要介绍了Element UI框架中的四个组件：el-tooltip、el-Steps、el-tabl

*首先，el-tooltip组件用于提供悬浮提示信息，增强用户界面的交互性。通过配置其属性，可以方便地设置提示内容、显示方向及主题效果，同时支持通过自定义类名进行样式扩展。

其次，el-Steps组件用于展示步骤流程，帮助用户了解当前所处的步骤位置及整体进度。它支持多种状态标记，如完成、等待、错误等，并允许通过数据绑定动态更新步骤信息。此外，el-Steps还提供了丰富的样式定制选项，以满足不同场景下的需求。

接下来，el-table组件是Element UI中用于展示数据表格的重要组件。它提供了强大的数据绑定、排序、筛选及分页功能，并支持通过row-class-name和cell-class-name属性进行行和列的样式定制。这使得el-table在展示复杂数据时具有极高的灵活性和可定制性。

最后，el-popover组件用于创建弹出层，提供额外的信息或操作入口。它支持多种触发方式，如点击、悬停等，并允许通过popper-class属性进行样式定制。el-popover在提升用户操作体验方面具有重要意义，尤其在需要展示详细信息或执行复杂操作时更为突出。*

1、el-tooltip文字提示 -- 设置偏移量

在API属性popper-options的Popper.js中，offset修饰器（modifier）用于调整弹出元素（popper）相对于参考元素（reference）的位置。这个修饰器非常有用，因为它允许开发者根据需要对弹出元素进行细微的位置调整，以确保其布局符合设计要求。

`offset`修饰器的`options`对象

offset修饰器的options对象包含一个offset属性，该属性是一个包含两个值的数组：

数组的第一个值表示水平偏移量（X轴方向）。正值会将弹出元素向右移动，负值则会将其向左移动。
数组的第二个值表示垂直偏移量（Y轴方向）。正值会将弹出元素向下移动，负值则会将其向上移动。

在你提供的示例中：

modifiers: [ { name: "offset", options: { offset: [110, 10], // 这里的 [110, 10] 表示水平偏移 110px，垂直偏移 10px }, }, ],

offset: [110, 10] 表示弹出元素将相对于参考元素向右移动110像素（水平方向），并向下移动10像素（垂直方向）。

2、el-Steps 步骤条 -- 自定义样式

在使用Element Plus的 el-steps 组件时，你可能需要自定义其样式以满足特定的设计需求：

2.1自定义页面布局

<el-steps :active="activeStep" align-center>
  <el-step v-for="(item, index) in stepsList" :key="index" space="150">
    <!-- 自定义步骤条icon -->
    <template #icon> 
      <div :class="[index < activeStep ? 'completed-icon' : 'step-icon']">
        <span v-if="index < activeStep"
          ><el-icon style="color: #4e77ff"><Select /></el-icon
        ></span>
        <span v-else>{{ item.key }}</span>
      </div>
    </template>
    <!-- 自定义文案样式 -->
    <template #title>
      <div class="step-text">
        {{ item.title }}
      </div>
    </template>
  </el-step>
</el-steps>

2、自定义css样式

//自定义图标大小
.step-icon,
.completed-icon {
    width: 32px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    border: 2px solid #dddddd;
    color: #666;
    font-size: 16px;
    font-weight: 600;
  }
//自定义步骤条的线条颜色、粗细、左右边距
:deep(.el-step__line) {
    background-color: #dddddd;
    height: 1px;
    left: 70%;
    right: -30%;
  }

3、el-table -- 表格线设置

:deep(.el-table) {
    border-radius: 5px;
    border: 1px solid #BDE0FF;
    // color: #000;
    .el-table__header-wrapper .el-table__header .cell {
        text-align: center !important;
        font-family: "微软雅黑", "思源黑体";
    }
    
    .el-table__body-wrapper tbody td,
    .el-table__header-wrapper thead th {
        border-bottom: 1px solid #BDE0FF;
        /* 横向线条 */
        border-right: 1px solid #BDE0FF;
        /* 纵向线条 */
    }

    /* 处理最后一列的右边框 */
    .el-table__body-wrapper tbody td:last-child,
    .el-table__header-wrapper thead th:last-child {
        border-right: none;
    }

    /* 处理最后一行的下边框 */
    .el-table__body-wrapper tbody tr:last-child td {
        //   background: pink;
        border-bottom: none;
        /* 最后一行表头不需要底部边框 */
    }

    .el-table__inner-wrapper::before {
        background-color: transparent !important;
    }
}

4、el-popover 自定义样式

<el-popover
  placement="top-start"
  :width="200"
  trigger="click"
  popper-style="font-size: 14px;color: #ff8a00"
>
  <p style="color: #333333; margin: 0 0 10px 0">余额查询</p>
  <span>{{ balance }}</span>
  <template #reference>
    <el-link
      class="link-btn"
      type="primary"
      @click="accountBalance(row)"
      v-show="row.bankAccount"
      ><SvgIcon iconClass="balanceInquiry" />余额查询</el-link
    >
  </template>
</el-popover>

5、设置字间距

letter-spacing: 2rpx;

6、遮罩层自定义样式

.overlay-class{
    width: 100%;
    height: 100%;
    overflow: hidden;
 }
 .overlay-class::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    background: #000;
    opacity: .7;
    z-index: 999;
  }

7、手画一个三角形

.box{
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:50px solid #333;
    width:0;
    height:0;
}

UI美化小贴士