mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-22 21:22:33 +08:00
'admin-20.12.17:编写自定义主题样式'
This commit is contained in:
lyt
parent
c5557c038c
commit
13f8c82e63
@ -175,32 +175,53 @@ cnpm install sass sass-loader --save-dev
|
||||
|
||||
## 自定义 Element Plus 主题
|
||||
Element Plus 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element Plus 的样式变量。新建一个样式文件，例如 `element-variables.scss`，写入以下内容：
|
||||
|
||||
#### 1、element-variables.scss
|
||||
注意没有 `~` 符号，`@import '~element-plus/packages/theme-chalk/src/index';`
|
||||
|
||||
`404问题`：[在vite当中使用主题，字体路径的 ~ 无法正常解析，build和dev均报错](https://github.com/element-plus/element-plus/issues/958)临时处理：把字体文件复制到src下了，用相对路径引入。
|
||||
|
||||
1.1、element-variables.scss
|
||||
::: warning 提示
|
||||
由于 vite 目前（2020.12.17）不支持 [自定义主题 Element Plus](https://element-plus.org/#/zh-CN/component/custom-theme) 文档中的写法，若强行使用打包会出现问题：
|
||||
:::
|
||||
|
||||
```scss
|
||||
```ts
|
||||
/* 改变主题色变量 */
|
||||
$--color-primary: teal;
|
||||
|
||||
@import 'element-plus/packages/theme-chalk/src/index';
|
||||
/* 改变 icon 字体路径变量，必需 */
|
||||
$--font-path: '~element-plus/lib/theme-chalk/fonts';
|
||||
|
||||
@import "~element-plus/packages/theme-chalk/src/index";
|
||||
```
|
||||
|
||||
1.2、页面引入下载的 fonts `（注意路径）`：
|
||||
::: tip 提示
|
||||
所以采用 CSS3 `:root`（:root 选择器选取文档的根元素） 写法，具体方法我会在顶部导航 `主题` 中进行说明：
|
||||
:::
|
||||
|
||||
```scss
|
||||
@font-face {
|
||||
font-family: 'element-icons';
|
||||
src: url('../fonts/element-icons.woff') format('woff'), /* chrome, firefox */
|
||||
url('../fonts/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
font-weight: normal;
|
||||
font-display: $--font-display;
|
||||
font-style: normal;
|
||||
```css
|
||||
/* 定义一个名为 "--main-bg-color" 的属性，然后使用 var() 函数调用该属性： */
|
||||
:root {
|
||||
--main-bg-color: red;
|
||||
}
|
||||
|
||||
#div1 {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
#div2 {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
```
|
||||
|
||||
改变变量的颜色：
|
||||
|
||||
- 1.1、当有内联样式或者 js 设置的值时：`document.documentElement.style.getPropertyValue` 获取到的是实际的值
|
||||
- 2.2、当只有 :root 选择器或者 html 选择器时，`document.documentElement.style.getPropertyValue` 获取到的值为空
|
||||
|
||||
```ts
|
||||
// 获取值
|
||||
document.documentElement.style.getPropertyValue('--main-bg-color');
|
||||
|
||||
// 设置值
|
||||
document.documentElement.style.setProperty('--main-bg-color', 'blue');
|
||||
```
|
||||
|
||||
#### 2、配置目录别名 `@`，方便引用
|
||||
@ -227,18 +248,17 @@ export default viteConfig
|
||||
```
|
||||
|
||||
#### 3、页面中使用
|
||||
注意 `/@assets` 写法，一定要以 `/` 开头，否则报 `404`
|
||||
注意 `/@` 写法，一定要以 `/` 开头，否则报 `404`
|
||||
|
||||
```ts
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
import ElementPlus from 'element-plus';
|
||||
import '/@assets/style/base/index.scss';
|
||||
import 'element-plus/lib/theme-chalk/index.css';
|
||||
import '/@/style/index.css';
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(ElementPlus)
|
||||
app.mount('#app')
|
||||
createApp(App).use(ElementPlus).mount('#app')
|
||||
```
|
||||
|
||||
#### 4、动态换肤功能
|
||||
|
||||
@ -2,6 +2,16 @@
|
||||
sidebar: auto
|
||||
---
|
||||
# 更新日志
|
||||
## 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)
|
||||
|
||||
|
||||
@ -13,7 +13,33 @@
|
||||
<div class="red">44</div>
|
||||
</div>
|
||||
<el-color-picker v-model="color" @change="colorChange"></el-color-picker>
|
||||
<img src="/@/assets/11.png" />
|
||||
<!-- <img src="/@/assets/11.png" /> -->
|
||||
<span>灰色模式</span>
|
||||
<el-switch v-model="value1" @change="onSwitchChange1"></el-switch>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
|
||||
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
|
||||
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal">
|
||||
<el-menu-item index="1">处理中心</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template #title>我的工作台</template>
|
||||
<el-menu-item index="2-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-2">选项2</el-menu-item>
|
||||
<el-menu-item index="2-3">选项3</el-menu-item>
|
||||
<el-submenu index="2-4">
|
||||
<template #title>选项4</template>
|
||||
<el-menu-item index="2-4-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-4-2">选项2</el-menu-item>
|
||||
<el-menu-item index="2-4-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3" disabled>消息中心</el-menu-item>
|
||||
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@ -22,16 +48,26 @@ export default {
|
||||
name: "App",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
color: ""
|
||||
color: "",
|
||||
value1: false,
|
||||
activeName: "second",
|
||||
activeIndex2: "1",
|
||||
});
|
||||
function colorChange() {
|
||||
console.log(state.color);
|
||||
document
|
||||
.getElementsByTagName("body")[0]
|
||||
.style.setProperty("--primary", state.color);
|
||||
document.documentElement.style.setProperty(
|
||||
"--primary-color",
|
||||
state.color
|
||||
);
|
||||
}
|
||||
function onSwitchChange1() {
|
||||
document.documentElement.style.setProperty(
|
||||
"--grey-model",
|
||||
state.value1 ? "100%" : "0%"
|
||||
);
|
||||
}
|
||||
return {
|
||||
colorChange,
|
||||
onSwitchChange1,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
|
||||
@ -2,8 +2,8 @@ import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
import ElementPlus from 'element-plus';
|
||||
// import 'element-plus/lib/theme-chalk/index.css';
|
||||
import '/@/style/index.scss';
|
||||
import 'element-plus/lib/theme-chalk/index.css';
|
||||
import '/@/style/index.css';
|
||||
|
||||
createApp(App).use(ElementPlus).mount('#app')
|
||||
|
||||
|
||||
51
vue-admin-wonderful-next/src/style/index.css
Normal file
51
vue-admin-wonderful-next/src/style/index.css
Normal file
@ -0,0 +1,51 @@
|
||||
@import './transition.scss';
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary-color: #409eff;
|
||||
--primary--color-hover: #66b1ff;
|
||||
--grey-model: 0%;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: grayscale(var(--grey-model));
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
color: #ffffff;
|
||||
background-color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.el-button--primary:hover {
|
||||
color: #ffffff;
|
||||
background-color: var(--primary--color-hover);
|
||||
border-color: var(--primary--color-hover);
|
||||
}
|
||||
|
||||
.el-switch.is-checked .el-switch__core {
|
||||
border-color: var(--primary-color) !important;
|
||||
background-color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.el-tabs__item:hover,
|
||||
.el-tabs__item.is-active {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
background-color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active,
|
||||
.el-submenu.is-active .el-submenu__title {
|
||||
color: var(--primary-color) !important;
|
||||
border-bottom-color: var(--primary-color) !important;
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
@import './element-variables.scss';
|
||||
@import './transition.scss';
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'element-icons';
|
||||
// src: url('./element-icons.woff') format('woff'), /* chrome, firefox */
|
||||
// url('./element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
// font-weight: normal;
|
||||
// // font-display: $--font-display;
|
||||
// font-style: normal;
|
||||
// }
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user