vue3+vite项目更换自定义主题

Posted 2022-05-17 IT飞牛

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;