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'

 应用

   
import { ref } from 'vue'
//收集开关的数据
let dark = ref(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	-----

 
import { ref } from 'vue'
const color = ref('rgba(255, 69, 0, 0.68)')

const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])

//主题颜色的设置
const setColor = () => {
  //通知js修改根节点的样式对象的属性与属性值
  const html = document.documentElement
  html.style.setProperty('--el-color-primary', color.value)
}

全屏

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' }
}
 


 

展示 Left 组件
展示 Right组件

nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；

理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，