'admin-20.12.22:新增自定义全局主题文档编写'
This commit is contained in:
lyt-Top
parent
98cbce557f
commit
747e92f8e5
@ -266,3 +266,7 @@ createApp(App).use(ElementPlus).mount('#app')
|
||||
|
||||
#### 4、动态换肤功能
|
||||
使用 `ColorPicker 颜色选择器`：[https://element-plus.gitee.io/#/zh-CN/component/color-picker](https://element-plus.gitee.io/#/zh-CN/component/color-picker)，实现动态换肤功能
|
||||
|
||||
::: tip 提示
|
||||
请移步顶部导航 `主题` 中查看详细内容
|
||||
:::
|
||||
176
vue-admin-wonderful-next-docs/docs/theme/README.md
vendored
176
vue-admin-wonderful-next-docs/docs/theme/README.md
vendored
@ -0,0 +1,176 @@
|
||||
---
|
||||
sidebar: auto
|
||||
---
|
||||
# 主题设置
|
||||
|
||||
## 目录结构
|
||||
#### `src/theme` 下，后期继续补充，样式都会写在这个文件夹下：
|
||||
|
||||
```ts
|
||||
├── theme
|
||||
├── common
|
||||
│ ├── transition.scss (页面过渡动画)
|
||||
│ └── var.scss (全局主题样式，用于全局改变样式)
|
||||
│
|
||||
├── mixins
|
||||
│ ├── element-mixins.scss (定义重置的element plus混入复用样式)
|
||||
│ ├── function.scs (全局主题颜色调用混入函数)
|
||||
│ └── mixins.scss (定义一些常用的全局混入样式)
|
||||
│
|
||||
├── app.scss (页面主样式，用于重置浏览器默认样式)
|
||||
├── base.scss (基础样式、过渡动画等)
|
||||
├── element.scss (重置的element plus样式，用于改变主题)
|
||||
├── index.scss (页面样式出口)
|
||||
└── media.scss (手机适配样式)
|
||||
```
|
||||
|
||||
|
||||
## scss 部分函数说明
|
||||
#### 1、scss @mixin
|
||||
[scss官方中文文档](https://www.sass.hk/docs/)，具体请查阅官方文档。使用方法：
|
||||
|
||||
- 1.1 定义
|
||||
|
||||
```scss
|
||||
/* Button 按钮
|
||||
------------------------------- */
|
||||
@mixin Button($main, $c1, $c2) {
|
||||
color: set-color($main);
|
||||
background: set-color($c1);
|
||||
border-color: set-color($c2);
|
||||
}
|
||||
```
|
||||
|
||||
- 1.2 页面中使用，先引入，然后在 `css` 类中通过 `@include` 使用
|
||||
|
||||
```scss
|
||||
@import 'mixins/element-mixins.scss';
|
||||
|
||||
// default
|
||||
.el-button--default:hover,
|
||||
.el-button--default:focus {
|
||||
@include Button(primary, primary-light-8, primary-light-6);
|
||||
}
|
||||
```
|
||||
|
||||
#### 2、scss @function
|
||||
|
||||
- 2.1 定义函数
|
||||
|
||||
```scss
|
||||
/* 颜色调用函数
|
||||
------------------------------- */
|
||||
@function set-color($key) {
|
||||
@return var(--color-#{$key});
|
||||
}
|
||||
```
|
||||
|
||||
- 2.2 不理解？请看这个 `css3 :root` [CSS var() 函数](https://www.runoob.com/cssref/func-var.html)
|
||||
|
||||
```scss
|
||||
/* 定义一个名为 "--main-bg-color" 的属性，然后使用 var() 函数调用该属性： */
|
||||
:root {
|
||||
--main-bg-color: red;
|
||||
}
|
||||
|
||||
#div1 {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
#div2 {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
```
|
||||
|
||||
#### 3、为什么不使用这种写法放进 :root 中？
|
||||
|
||||
```scss
|
||||
$colors: (
|
||||
primary: #409eff,
|
||||
success: #67c23a,
|
||||
info: #909399,
|
||||
warning: #e6a23c,
|
||||
danger: #f56c6c
|
||||
)
|
||||
|
||||
:root {
|
||||
@each $key, $value in $colors {
|
||||
--color-#{$key}: #{$value};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- 因为 scss 不支持这种嵌套 `mix(var(--color-primary), var(--color-success), 10%)`，lighten / darken / saturate / desaturate 等，从而无法用
|
||||
- 从而无法用 `document.documentElement.style.setProperty('--color-primary', 'blue');` 改变样式
|
||||
|
||||
|
||||
## 具体实现自定义全局主题
|
||||
|
||||
实现方法，以下方法不晓得会不会影响页面渲染性能：
|
||||
|
||||
- 1、定义全局 :root 初始变量，路径：`src/theme/common/var.scss`
|
||||
- 2、编写覆盖 element plus 的样式：路径：`src/theme/element.scss`
|
||||
- 3、页面通过 `document.documentElement.style.setProperty` 方法改变 `:root` 中的值
|
||||
|
||||
::: tip 提示
|
||||
第一第二步就不介绍了，直接去路径去看就懂了。接下来我们讲讲第三步：
|
||||
:::
|
||||
|
||||
#### 1、通过 `document.documentElement.style.setProperty` 改变颜色值 [setProperty 文档](https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration/setProperty)
|
||||
|
||||
```ts
|
||||
// setup 中
|
||||
import { reactive, toRefs } from "vue"
|
||||
|
||||
export defalut {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
color: ''
|
||||
})
|
||||
function colorChange() {
|
||||
// 设置颜色
|
||||
document.documentElement.style.setProperty(
|
||||
"--color-primary",
|
||||
state.color
|
||||
)
|
||||
// 设置颜色变浅
|
||||
document.documentElement.style.setProperty(
|
||||
"--color-primary-light-1",
|
||||
getLightColor(state.color1, 0.1)
|
||||
)
|
||||
}
|
||||
return {
|
||||
colorChange,
|
||||
...toRefs(state)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 2、getLightColor 颜色变浅方法
|
||||
|
||||
路径在：`src/utils/theme.ts`
|
||||
|
||||
```ts
|
||||
// 变浅颜色值，level为加深的程度，限0-1之间
|
||||
export function getLightColor(color: any, level: number) {
|
||||
let reg = /^\#?[0-9A-F]{6}$/;
|
||||
if (!reg.test(color)) return ElMessage({type:'warning',message:"输入错误的hex颜色值"});
|
||||
let rgb = hexToRgb(color);
|
||||
for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
|
||||
return rgbToHex(rgb[0], rgb[1], rgb[2]);
|
||||
}
|
||||
```
|
||||
|
||||
#### 3、到此就完成了主题的全局变色了
|
||||
|
||||
::: tip 还有疑问？
|
||||
总的来说，就是通过重新定义 `css` 样式，用来覆盖 [element-plus](https://element-plus.gitee.io/#/zh-CN/component/changelog) 默认的样式，从而实现全局主题变色。
|
||||
:::
|
||||
|
||||
## 其它方法实现全局主题
|
||||
|
||||
- 参考 `花裤衩大佬`：[手摸手，带你用vue撸后台 系列三(实战篇)](https://segmentfault.com/a/1190000009762198#articleHeader2)
|
||||
- vue-element-admin：[https://github.com/PanJiaChen/vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
|
||||
|
||||
|
||||
@ -2,15 +2,22 @@
|
||||
sidebar: auto
|
||||
---
|
||||
# 更新日志
|
||||
## 2020-12-22
|
||||
- 处理 [element-plus](https://element-plus.gitee.io/#/zh-CN/component/icon) 打包后字体图标 404 问题
|
||||
- 编写 对应 `3.x` 主题文档编写
|
||||
|
||||
## 2020-12-17
|
||||
- 处理打包报错问题，找了好几天，加上白天上班没时间
|
||||
|
||||
## 2020-12-13
|
||||
- 网修好了，电脑也好了，风停了，雨也停了，可以愉快的继续开发了。:smile: :smile: :muscle:
|
||||
- 新增 安装 element-plus 框架，处理自定义主题问题，由于 vite 目前(2020-12-13)不支持 [element-plus 官方文档自定义主题](https://element-plus.org/#/zh-CN/component/custom-theme) `~` 引入写法，改用 css3 :root 写法。这是一个坑，我蹲了好久 :smile:
|
||||
- 新增 对应编写相关文档
|
||||
|
||||
## 2020-12-09
|
||||
- 由于晚上下班回到去 :crescent_moon: ，没有网（电信线路坏），暂停开发。顺便把电脑修了 :watermelon: :joy: :joy:
|
||||
- 因为是晚上下班回去 :crescent_moon: 才开发，所以开发的有点慢
|
||||
|
||||
## 2020-12-08
|
||||
- 创建 vue-admin-wonderful-next目录，包含主体项目、文档、图片库
|
||||
- 说明 该项目基于 [vue3.x](https://github.com/vuejs/vue-next)、[vite](https://github.com/vitejs/vite)、[typescript](https://github.com/microsoft/TypeScript)、[element-plus](https://github.com/element-plus/element-plus)
|
||||
|
||||
@ -5,7 +5,7 @@ sidebar: auto
|
||||
|
||||
[官网：https://code.visualstudio.com/](https://code.visualstudio.com/)
|
||||
|
||||
## 一、首选项 - 设置 - settings.json
|
||||
## 首选项 - 设置 - settings.json
|
||||
|
||||
```json
|
||||
{
|
||||
@ -44,7 +44,7 @@ sidebar: auto
|
||||
}
|
||||
```
|
||||
|
||||
## 二、vsCode 插件
|
||||
## vsCode 插件
|
||||
1. Auto Close Tag
|
||||
1. Auto Rename Tag
|
||||
1. background-cover
|
||||
@ -70,7 +70,7 @@ sidebar: auto
|
||||
1. Prettier - Code formatter
|
||||
1. Vetur
|
||||
|
||||
## 三、图文步骤
|
||||
## 图文步骤
|
||||
|
||||
#### 1、打开设置
|
||||
<p></p><img src="https://gitee.com/lyt-top/vue-admin-wonderful-images/raw/master/doc/vs-code1.png"/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user