使用vue3实现element-plus的主题切换效果

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css' // 黑色主题

app.use(ElementPlus, {
  locale: locale,
  size: Cookies.get('size') || 'default'
})

<template>
  <div>
    <el-switch v-model='value1' class='switch' @change='changeSwitch'>
      <template #active-action>
        <el-icon>
          <Moon />
        </el-icon>
      </template>
      <template #inactive-action>
        <el-icon>
          <Sunny />
        </el-icon>
      </template>
    </el-switch>
  </div>
</template>

<script setup>
let value1 = ref(false)

function changeSwitch() {
  document.documentElement.classList.toggle('dark')
}
</script>
<style scoped lang='scss'>
.switch {
  position: absolute;
  left: 200px;
  top: 200px;
}
</style>

function changeSwitch() {
  document.startViewTransition(() => {
    document.documentElement.classList.toggle('dark')
  })
}

::view-transition-old(root), /* 旧视图*/
::view-transition-new(root) { /* 新视图*/
  animation-duration: 2s;
}

<template>
  <div>
    <el-switch v-model='isDark' class='switch' ref='switchRef' @change='changeSwitch'>
      <template #active-action>
        <el-icon>
          <Moon />
        </el-icon>
      </template>
      <template #inactive-action>
        <el-icon>
          <Sunny />
        </el-icon>
      </template>
    </el-switch>
  </div>
</template>

<script setup>
import { ref } from 'vue'

let isDark = ref(false)
let switchRef = ref(null)


function changeSwitch() {
  // 创建一个视图过渡动画，用于在切换深色模式时优化用户体验
  const transition = document.startViewTransition(() => {
    // 切换HTML文档的dark类，以激活或停用深色模式
    document.documentElement.classList.toggle('dark')
  })

  // 当视图过渡动画准备就绪时执行以下代码
  transition.ready.then(() => {
    // 获取switch组件的DOM元素，用于计算过渡动画的起点
    const switchElement = switchRef.value?.$el
    // 计算switch组件中心点的坐标
    const rect = switchElement.getBoundingClientRect()
    const x = rect.left + rect.width / 2
    const y = rect.top + rect.height / 2
    // 计算过渡动画结束时的圆半径，确保覆盖整个视口
    const endRadius = Math.hypot(
      Math.max(x, innerWidth - x),
      Math.max(y, innerHeight - y),
    )
    // 创建clipPath数组，定义了过渡动画的起始和结束形状
    const clipPath = [
      `circle(0 at ${x}px ${y}px)`,
      `circle(${endRadius}px at ${x}px ${y}px)`,
    ]
    // 在HTML文档的根元素上启动一个动画，根据当前是否为深色模式来决定动画的方向
    document.documentElement.animate(
      {
        clipPath: isDark.value ? clipPath.reverse() : clipPath,
      },
      {
        duration: 400, // 动画持续时间
        pseudoElement: isDark.value
          ? '::view-transition-old(root)'
          : '::view-transition-new(root)', // 根据深色模式状态选择伪元素
      },
    )
  })
}
</script>

<style>
::view-transition-new(root),
::view-transition-old(root) {
  /* 关闭默认动画，否则影响自定义动画的执行 */
  animation: none !important;
}

/*黑暗模式下，让旧节点的层级变高，否则会导致动画出不来*/
.dark::view-transition-old(root) {
  z-index: 100;
}
</style>

<style scoped>
.switch {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>