v3+element管理系统----主题定制 && 刷新 && 全屏

前端贾公子

已于 2023-06-08 10:44:52 修改

阅读量637

点赞数

分类专栏： vue3实战文章标签： javascript 前端开发语言

于 2023-06-07 17:29:41 首次发布

本文链接：https://blog.csdn.net/qq_63358859/article/details/131091904

版权

vue3实战专栏收录该内容

21 篇文章 3 订阅

订阅专栏

本文介绍了ElementPlus框架如何启用和切换暗黑模式，包括通过添加类名和使用VueUse库。此外，还详细讲解了自定义主题的方法，动态修改CSS变量以及应用到项目中的过程。同时，涉及了全屏切换、router-view的v-slot使用、transition标签的动画效果以及动态组件和Vue的nextTick方法在DOM更新后的应用。

摘要由CSDN通过智能技术生成

暗黑模式

现在，Element Plus 终于支持了暗黑模式！

我们提取并整理了所有的设计变量，并通过 CSS Vars 技术实现动态更新主题。

如何启用？

首先你可以创建一个开关来控制 暗黑模式 的 class 类名。

如果您只需要暗色模式，只需在 html 上添加一个名为 dark 的类。

<html class="dark">
  <head></head>
  <body></body>
</html>

如果您想动态切换，建议使用 useDark | VueUse。

只需要如下在项目入口文件修改一行代码：

// main.ts
// 如果只想导入css变量
import 'element-plus/theme-chalk/dark/css-vars.css'

应用

   <el-switch
          @change="changeDark"
          v-model="dark"
          class="mt-2"
          style="margin-left: 24px"
          inline-prompt
          active-icon="MoonNight"
          inactive-icon="Sunny"
        />
import { ref } from 'vue'
//收集开关的数据
let dark = ref<boolean>(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`	-----

 <el-color-picker
          @change="setColor"
          v-model="color"
          size="small"
          show-alpha
          :predefine="predefineColors"
        />
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 提供了一个内置的 <component> 组件,专门用来实现动态组件的渲染,示例代码如下:

data() {
    // 当前要渲染的组件名称
    return { comName: 'Left' }
}
 
<!-- 通过 is 属性 动态指定要渲染的组件 -->
<component :is="comName"></component>
 
<!-- 点击按钮 动态切换组件的名称 -->
<button @click="comName = 'Left'">展示 Left 组件</button>
<button @click="comName = 'Right'">展示 Right组件</button>

nextTick

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

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

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

<template>
  <div>
    <router-view v-slot="{ Component }">
      <transition name="fade">
        <component :is="Component" v-if="flage" />
      </transition>
    </router-view>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Main',
}
</script>
<script setup lang="ts">
import { useSettingStore } from '@/store/setting'
import { watch, ref, nextTick } from 'vue'
const SettingStore = useSettingStore()
const flage = ref(true)
watch(
  () => SettingStore.refresh,
  () => {
    flage.value = false
    nextTick(() => {
      flage.value = true
    })
  },
)
</script>

<style scoped>
.fade-enter-from {
  opacity: 0;
  transform: scale(0);
}
.fade-enter-active {
  transition: all 0.3s;
}

.fade-enter-to {
  opacity: 1;
  transform: scale(1);
}
</style>