From 747e92f8e53de70cfc4a3c071fab36e773e41815 Mon Sep 17 00:00:00 2001 From: lyt-Top <1105290566@qq.com> Date: Tue, 22 Dec 2020 23:18:02 +0800 Subject: [PATCH] =?UTF-8?q?'admin-20.12.22:=E6=96=B0=E5=A2=9E=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=85=A8=E5=B1=80=E4=B8=BB=E9=A2=98=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E7=BC=96=E5=86=99'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/config/README.md | 6 +- .../docs/theme/README.md | 176 ++++++++++++++++++ .../docs/update/README.md | 7 + .../docs/vsCode/README.md | 6 +- 4 files changed, 191 insertions(+), 4 deletions(-) diff --git a/vue-admin-wonderful-next-docs/docs/config/README.md b/vue-admin-wonderful-next-docs/docs/config/README.md index db033ce..6d50126 100644 --- a/vue-admin-wonderful-next-docs/docs/config/README.md +++ b/vue-admin-wonderful-next-docs/docs/config/README.md @@ -265,4 +265,8 @@ 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)，实现动态换肤功能 \ No newline at end of file +使用 `ColorPicker 颜色选择器`：[https://element-plus.gitee.io/#/zh-CN/component/color-picker](https://element-plus.gitee.io/#/zh-CN/component/color-picker)，实现动态换肤功能 + +::: tip 提示 +请移步顶部导航 `主题` 中查看详细内容 +::: \ No newline at end of file diff --git a/vue-admin-wonderful-next-docs/docs/theme/README.md b/vue-admin-wonderful-next-docs/docs/theme/README.md index e69de29..c16f6e3 100644 --- a/vue-admin-wonderful-next-docs/docs/theme/README.md +++ b/vue-admin-wonderful-next-docs/docs/theme/README.md @@ -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) + + diff --git a/vue-admin-wonderful-next-docs/docs/update/README.md b/vue-admin-wonderful-next-docs/docs/update/README.md index 2736628..3fd5ddb 100644 --- a/vue-admin-wonderful-next-docs/docs/update/README.md +++ b/vue-admin-wonderful-next-docs/docs/update/README.md @@ -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) diff --git a/vue-admin-wonderful-next-docs/docs/vsCode/README.md b/vue-admin-wonderful-next-docs/docs/vsCode/README.md index 9bd8344..58efb4a 100644 --- a/vue-admin-wonderful-next-docs/docs/vsCode/README.md +++ b/vue-admin-wonderful-next-docs/docs/vsCode/README.md @@ -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、打开设置