element换肤及相关源码记录

element class采用BEM的命名思想

• block 代表了更高级别的抽象或组件。

• block__element 代表 .block 的后代，用于形成一个完整的 .block 的整体。

• block--modifier 代表 .block 的不同状态或不同版本。 使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定。如：

.sub-block__element {}

.sub-block--modifier {}

scss基本使用

注释

/*
aaa
bbb
编译成css后依然存在
*/

//ccc
编译成css后消失

变量

$color  //表示一个变量(以$开头)

$color:#f3e1e1;
body{
    $color1:red;
    background-color:$color;
    color:$color1;
}

body{    background-color:#f3e1e1;    color:red;}

$color:#f3e1e1;
body{
    $color1:red;
    background-color:$color;
    color:$color1;
}
#app{
    color:$color1;
}

支持控制语句

if

$color:5;

p{
    @if $color==0{
        color:blue;
    }@else if $color ==1{
        color:red;
    }@else{
        color:yellow;
    }
}

for

• 相同点：两者均包含
的值

• 不同点：through包含
的值，但to不包含的值

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

/*compile:*/
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

each

.cr{
    width:200px;
    height:200px;
    display:inline-block;
}
$cr_list:{
    #f3a5bd,#8b80b8,##00326,
    #f2711c,#db2828,#42b8dd,
    #f3a5bd,#8b80b8,##00326,
}
@each $cr in $cr_list{
    $i:index($cr_list,$cr);
    .cr:nth-child(#{$i}){
        background:$cr;
    }
}

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

// compile:
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

/* compile:*/
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; }
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; }

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

/* compile:*/
h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

ElementPlus包分析

包目录作用

• dist 最终构建的完整产物

• lib文件夹存放着ElementPlus打包后的文件，CommonJS格式（动态加载语句）

• es文件夹存放着ElementPlus打包后的文件,ES格式(es-module打包方式，静态不可以动态加载语句)
• 这两个模块解决的问题
• 解决变量污染问题，每个文件都是独立的作用域，所以不存在变量污染
• 解决代码维护问题，一个文件里代码非常清晰
• 解决文件依赖问题，一个文件里可以清楚的看到依赖了那些其它文件

• node_modules文件夹主要存放了组件相关的源代码

• src文件夹下存放了像指令、混入、工具方法等源代码

• theme-chalk存放组件库样式，可理解为样式产物（gulp 打包，监视文件的修改）
• 样式文件和字体图标的打包使用的是 /theme-chalk/gulpfile.js, 把每个 scss文件打包成单独的 css, 其中包含了通用的 base 样式，还有每个组件的样式文件。
• dark目录
css-vars.css定义.dark变量类名以及主题色基础配置。即设置本套主题色为dark前缀，当html标签中设置class=“dark”此主题生效



• src目录

|-- common  // 公共样式
    |-- popup.scss   // 定义弹出组件的样式
    |-- transition.scss  // 定义Element css动画样式
    |-- var.scss  // 定义变量
|-- dark
    |-- var.scss  //定义element-plus中黑暗色主题基础变量
    |-- css-var.scss  //更改element-plus原始的var变量
|-- select
    |-- common.scss  //响应式namespace命名空间
|-- date-picker  // 定义时间日期选择样式
|-- fonts //icon 字体
|-- mixins  // 混合样式  包含一些全局的函数 等
    |-- _button.scss   // button 组件样式
    |-- config.scss   // 配置文件 例如 样式库前缀名配置
    |-- function.scss   // 全局的样式函数
    |-- mixins.scss   // 全局的样式混合定义
    |-- utils.scss  // 工具样式混合定义
|-- alert.scss   // 单独 Alert  组件 的样式定义
...
|-- index.scss   // Element 库 全部的组件样式文件

---

/theme-chalk/src/dark/css-vars.scss
获取element-plus原始的var变量进行重写



/theme-chalk/src/common/var.scss

@mixin set-color-mix-level(
  $type,
  $number,
  $mode: 'light',
  $mix-color: $color-white
) {
  $colors: map.deep-merge(
    (
      $type: (
        '#{$mode}-#{$number}':
          mix(
            $mix-color,
            map.get($colors, $type, 'base'),
            math.percentage(math.div($number, 10))
          ),
      ),
    ),
    $colors
  ) !global;
}
@each $type in $types {
  @for $i from 1 through 9 {
    @include set-color-mix-level($type, $i, 'light', $color-white);
  }
}

此函数的作用为定义$color-white$color设置主色调mix函数将颜色从十六进制转化为rgb,同时根据两个变量为根设置:root选择器的样式覆盖node.style.setProperty(color,color-white)

相关源码解析

!global全局变量

!default默认变量

• /theme-chalk/mixins/config.scss
namespace:b element-separator:元素分割符 modeifier-sparator:
state-prefix: 状态相关，表示状态的前缀

• /theme-chalk/mixins/function.scss
由于Maps不能转换为纯CSS。作为变量的值或参数传递给CSS函数将会导致错误。使用inspect($value)函数以产生输出字符串。
取出前两位之后后两位之前，中间区域
之后检测是否与对应符号相关

• /theme-chlk/mixins/utils.scss
1行utils-clearfix表示清楚浮动
16行utils-vertical-center表示垂直居中

• /theme-chalk/mixins/mixin.scss
• #{}用于取出变量的方式,$B的值定义了一个class

$namespace: 'o' !default;
@mixin b(button) {
  $B: o + '-' + button !global;
//$B  o-button
  .#{$B} {
    @content;
  }
}

/theme-chalk/button.scss

样式覆盖

主题颜色变量如何被覆盖？

在element-plus源码中主题颜色变量的声明后边加上了!default后缀，而theme-chalk通过scss预编译

在scss中，!default标签表示：若变量已经赋值则不使用默认值（如果该变量已有值，则其旧值将被覆盖）；如果没有赋值就使用默认值。在Scss提供的标志中，仅当变量未定义或其值为 null 时，才会将值分配给该变量。否则，将使用现有值。!default

主题换肤

• @forward引入后可以使用 !default覆盖之前文件里使用 !default的变量

• @use引入后不能使用 !default覆盖之前的 !default变量。

scss改变主题

方式一：自定义主题使用scss进行更换

方式二：使用ElementPlus官网提供插件Vueuse

npm i @vueuse/core

<template>
<div class="demo">
  <el-button type="primary">Primary</el-button>
  <el-switch
  inline-prompt
  v-model="theme"
  @click="toggle()"></el-switch>
</div>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue';
import {useToggle} from '@vueuse/shared'
import { useDark} from '@vueuse/core'
export default defineComponent({
  name: 'App',
  setup(){
    const theme = ref<boolean>(false)
    const isDark = useDark({
      storageKey:'useDarKEY',
      valueDark:'dark',
      valueLight:'light',
    })
    const toggle = useToggle(isDark);
    return{
      theme,
      toggle,
    }
  }
});
</script>

css动态修改主题

• 不足：
• 未修改的组件，有覆盖不全的情况，需要一一排查，比较耗时；
• 不够智能化，element-plus中组件变量未继承自全局变量；

:root {    --el-color-primary: #F74023;    /* 主题色 */}

Echarts主题变化

import { mapState } from 'vuex'export default {  computed: {    ...mapState(['theme'])  }}/*监听theme变化*/export default {  watch: {    theme () {      this.chartInstance.dispose()      this.initChart()      this.screenAdapter()     this.updateChart()   } }}

const theme = {chalk: {  backgroundColor: '#161522',  titleColor: '#fff',  },}export function getThemeValue (arg) {  return theme[arg]}

configyreWebpack:{
    plugins:[

    ]
}