v3+element管理系统----主题定制 && 刷新 && 全屏
目录
暗黑模式
如何启用？
应用
自定义主题
应用
全屏
刷新
router-view的v-slot
transition 标签
动态组件
nextTick
暗黑模式
现在，Element Plus 终于支持了暗黑模式！
我们提取并整理了所有的设计变量，并通过 CSS Vars 技术实现动态更新主题。
如何启用？
首先你可以创建一个开关来控制 暗黑模式 的 class 类名。
如果您只需要暗色模式，只需在 html 上添加一个名为
dark的类 。
如果您想动态切换，建议使用 useDark | VueUse。
只需要如下在项目入口文件修改一行代码：
// main.ts
// 如果只想导入css变量
import 'element-plus/theme-chalk/dark/css-vars.css'应用
(false)
//switch开关的chang事件进行暗黑模式的切换
const changeDark = () => {
//获取HTML根节点
let html = document.documentElement
//判断HTML标签是否有类名dark
dark.value ? (html.className = 'dark') : (html.className = '')
}
main.ts
//暗黑模式需要的样式
import 'element-plus/theme-chalk/dark/css-vars.css' 自定义主题
如果您想要通过 js 控制 css 变量，可以这样做：
// document.documentElement 是全局变量时
const el = document.documentElement
// const el = document.getElementById('xxx')
// 获取 css 变量
getComputedStyle(el).getPropertyValue(`--el-color-primary`)
// 设置 css 变量
el.style.setProperty('--el-color-primary', 'red')应用
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 选中项绑定值 | string |
— |
| predefine | 预定义颜色 | object |
— |
| size | 尺寸 | enum |
— |
| show-alpha | 是否支持透明度选择 | boolean |
false |
| change | 当绑定值变化时触发 | Function |
----- |
全屏
fullscreenElement 属性返回以全屏模式显示的当前元素，或者在非全屏模式时返回 null。
requestFullscreen() 方法以全屏模式打开元素。
exitFullscreen() 方法在全屏模式下取消元素。
// 全屏切换
const FullScreen = () => {
// 判断当前是否为全屏
let full = document.fullscreenElement
// 切换为全屏
if (full) {
// 退出全屏
document.exitFullscreen()
} else {
// 文档根节点requestFullscreen方法
document.documentElement.requestFullscreen()
}
}刷新
router-view的v-slot
可以将路由映射组件展示出来的一个容器，因此对应的你可以把它放在任何地方，以适应你的布局
router-view也提供给我们一个插槽，可以用于 和 组件来包裹你的路由组件
Component：要渲染的组件route：解析出的标准化路由对象
transition 标签
transition 标签：Vue 的内置动画标签
作用：在 [插入] / [更新] / [移除] DOM 元素时，在合适的时候给元素添加样式类名（配合 CSS 样式使用，实现动画效果）
注意事项
transition 标签只能包含 1 个元素；如果里面写了多个元素，则只生效第一个
transition 包裹的标签需要设置 v-show / v-if 属性控制元素的显示
动画 CSS 样式对应的类名
- 进入：.v-enter 始状态、.v-enter-to 末状态、.v-enter-active 进入动画（Vue2）
- 离开：.v-leave 始状态、.v-leave-to 末状态、.v-leave-active 离开动画（Vue2）
- 进入：.v-enter-from 始状态、.v-enter-to 末状态、.v-enter-active 进入动画（Vue3）
- 离开：.v-leave-from 始状态、.v-leave-to 末状态、.v-leave-active 离开动画（Vue3）
name 属性：用于自动生成 CSS 动画类名
如果 transition 标签元素没有设置 name 属性，则对应的动画类名为 v-XXX
如果设置了 name 属性，则对应的动画类名为 属性值-XXX
动态组件
动态组件指的是动态切换组件的显示与隐藏
如何实现动态组件渲染
vue 提供了一个内置的
data() {
// 当前要渲染的组件名称
return { comName: 'Left' }
}
nextTick
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；
理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，