[JavaScript知识库]vue3+vite项目更换自定义主题

UI升级指南

• element-plus样式整体尺寸使用“default”，设置在各个组件上的size属性要同步改下，或者全部去掉。

//main.ts 全局样式尺寸设置
import element from 'element-plus'
import locale from 'element-plus/lib/locale/lang/zh-cn'
...
const app = createApp(App);
app.use(element, {locale,size: 'default'})    //size设置为"default"

• el-table：加上斑马线属性：stripe
• el-pagination：加上背景属性：background
• UI主题文件引入方法：

1. pi-vue-ui更新到0.4.4或更高版本
2. 删除main.ts中默认主题样式

import 'element-plus/dist/index.css' //此行删除

3. vite.config.ts修改

css: {
        //css预处理
        preprocessorOptions: {
            scss: {
                additionalData: '@import "./styles/theme_reset.scss";',
                //additionalData: '@import "./styles/theme_reset.scss";@import "./src/styles/index.scss";',如果有其他预加载文件，可在后面追加
                charset: false
            }
        }
    },

1. 升级后，element中部分组件会出现兼容性问题，例如：el-select边框消失。需要将element-plus更新到2.1.11;
2. el-table表头筛选组件中，“确定”、“取消”按钮size尺寸改成"small"。

/* styles/theme_reset.scss */
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss'with ($colors: ('primary': ('base': #1C3DD7,
    ),
  ),
  $button-font-size:("default":12px),
  $table-padding: ('default': 7px 0),
  $button-border-radius:('default': 4px),
  $table:('header-text-color':"#333",
    'header-bg-color':"#FAFAFA",
    'text-color':"#515455"
  ),
  $table-font-size:('default': 12px),
  $pagination:("button-bg-color":#ffffff));

// 如果只是按需导入，则可以忽略以下内容。
// 如果你想导入所有样式:
@use "element-plus/theme-chalk/src/index.scss"as *;

.el-pagination.is-background {
  .number:not(.is-active) {
    border: 1px solid #ebeef5;
    background-color: white;
  }

  .btn-prev,
  .btn-next {
    border: 1px solid #ebeef5;
    background-color: white;
  }
}

.el-table--default{
  font-size: 12px;
}
.el-table:not(.el-table--border) {
  .el-table__header-wrapper {
    .el-table__header>thead>tr {
      &>th:not(:first-child):not(.is-first-column)>div.cell {
        border-left: 1px solid #ddd;
      }
    }
  }
}

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖