基础平台工具框架文档

Appearance

主题和样式 ​

本章主要讲述样式相关的内容，如自定义定制主题、修改默认样式等。

使用Tailwind CSS ​

Tailwind CSS 作为一个CSS框架本质上是一个工具集，包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类，可以组合使用并直接在 HTML 代码上实现任何 UI 设计。

Tailwind CSS 原理基于一组预定义的类，这些类代表了常见的 CSS 属性和值。使用 Tailwind CSS，你不再需要手动编写 CSS 规则，而是通过在 HTML 元素上应用这些类来实现样式的设计。

  • 原子化类：将CSS样式分解为原子级别的类，每个类都代表一个特定的CSS属性和值组合。

  • 可配置性：允许你自定义每个类的样式，通过修改配置文件来调整颜色、字体等属性的值，实现定制化的设计风格。

  • 组合性：通过将多个类组合在一起，你可以轻松地创建复杂的样式。例如，text-center bg-blue-500 text-white p-4 将一个元素的文本水平居中显示，背景颜色设置为蓝色，文字颜色设置为白色，并添加了内边距为 4 个单位。

提醒

Web端框架内置了Tailwind CSS, 可以开箱即用。当然这是一个Best to Have的东西，如果你不习惯用它，完全可以用手写CSS替代。

Tailwind CSS

html
<div class="font-medium flex bg-white pt-[4px] m-[4px]"></div>

相当于CSS

html
<div class="custom"></div>
.custom{
  font-weight:500;
  display:flex;
  background:white;
  padding-top:4px;
  margin:4px
}

使用SCSS ​

SCSS是一种 CSS 预处理器，它扩展了普通的 CSS 语法，提供了一些额外的功能，例如嵌套规则、变量、Mixin 等，使得样式表的编写更加简洁和可维护。

提醒

同样的，框架已经内置了对于SCSS的支持,指定style的lang为scss即可

vue
  <style lang='scss'>
  </style>

变量 ​

scss
$primary-color: #007bff;
$secondary-color: #6c757d;

.btn-primary {
  background-color: $primary-color;
  color: #fff;
}

.btn-secondary {
  background-color: $secondary-color;
  color: #fff;
}

嵌套规则 ​

对于父子层级的样式，嵌套的写法非常方便

scss
.card {
  padding: 20px;
  background-color: #fff;
  
  .card-title {
    font-size: 18px;
    font-weight: bold;
  }
  
  .card-body {
    margin-top: 10px;
  }
}

相当于

css
.card {
  padding: 20px;
  background-color: #fff;
}
.card .card-title {
    font-size: 18px;
    font-weight: bold;
}
.card .card-body {
    margin-top: 10px;
}

继承 ​

scss
%btn-base {
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
}

.btn-primary {
  @extend %btn-base;
}

.btn-secondary {
  @extend %btn-base;
  background-color: #6c757d;
}

覆盖Element Plus样式 ​

框架使用Element Plus作为默认的组件库，组件自带了一套样式。有的时候，我们希望在使用组件的时候，对样式进行微调。如将Button组件的背景调成特殊色。

正常情况，我们为了防止样式干扰，通常在编写样式的时候，会加上scoped 关键字，这样在编译时候，会默认的给样式加上唯一的hash值，使得样式仅仅在组件内部起作用，而不会影响其他组件的同类名样式。

  • 组件A
vue
<template>
 <div class='dd'></div>
</template>
<style scoped lang="scss">
.dd{
  color:red
}
</style>
  • 组件B
vue
<template>
 <div class='dd'></div>
</template>
<style scoped lang="scss">
.dd{
  color:red
}
</style>

因为有scoped，.dd的样式不会相互影响。

但是当我想覆盖组件库样式的时候，发现无法修改

vue
<template>
 <div class='dd'>
  <el-button></el-button>
 </div>
</template>
<style scoped lang="scss">
.dd{
  color:red;
  .el-button{
    background:pink; //无法修改
  }
}
</style>

这是因为编译的时候，因为scoped的存在，编译器会忽略没有出现在组件内部的样式。如这里.el-button是写在子组件的类名，会被忽略。 最终编译的css如下:

css
.dd-xxx{
  color:red;
}
// 不会出现.el-button 相关的样式

使用:deep关键字 ​

我们可以使用:deep关键字来帮助我们覆盖子组件的样式

vue
<template>
 <div class='dd'>
  <el-button></el-button>
 </div>
</template>
<style scoped lang="scss">
.dd{
  color:red;
  :deep(.el-button ){
    background:pink; //可以被修改
  }
}
</style>

最终编译的css如下:

css
.dd-xxx .el-button{
  color:red;
}
// 出现.el-button 相关的样式
.dd-xxx{
  background:pink; 
}

定制主题 ​

Web端框架基于Element Plus默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。 但是如果需要大规模替换样式，例如： 将主题颜色从蓝色改为橙色或绿色，也许一个个将其覆盖起来不是一个好主意。

更改主题色 ​

平台默认的主题色是 #2187ff。

提醒

系统会自动的根据主题色，计算出基于主题色的不同透明度的颜色。如Button组件设置为plain类型时的背景色是主题色加了90%的透明度而来。

如果需要更改，在 /src/styles/theme.scss 中修改primary的颜色。

scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #2187ff // 修改主题色
    )
    ... //其他辅助色等
  ),
  $card: (
    'padding': '16px'
  ),
  $button: (
    'font-weight': '400'
  )
);
@use 'element-plus/theme-chalk/src/index.scss' as *;

当然您还仿照格式可以修改其他辅助色，如success,waring,danger,info等。具体的颜色默认值如下:

scss
    'white': #ffffff,
    'black': #000000,
    'primary': (
      'base': #2187ff,
    ),
    'success': (
      'base': #67c23a,
    ),
    'warning': (
      'base': #e6a23c,
    ),
    'danger': (
      'base': #f56c6c,
    ),
    'error': (
      'base': #f56c6c,
    ),
    'info': (
      'base': #909399,
    ),

全局修改element Plus 其他样式 ​

如果您想全局修改组件库样式，而不是一处一处覆盖，如下拉选择的padding的值。可在 src/styles/element-plus.scss 中修改。

css
.el-dropdown-menu {
  padding: 0 !important;
}

更多自定义样式方法请参考链接。