mirror of
https://github.com/zclzone/vue-naive-admin.git
synced 2025-05-01 14:49:00 +08:00
46 lines
1.0 KiB
Vue
46 lines
1.0 KiB
Vue
<template>
|
|
<i
|
|
id="toggleTheme"
|
|
class="mr-16 cursor-pointer"
|
|
:class="isDark ? 'i-fe:moon' : 'i-fe:sun'"
|
|
@click="toggleDark"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useAppStore } from '@/store'
|
|
import { useDark, useToggle } from '@vueuse/core'
|
|
|
|
const appStore = useAppStore()
|
|
const isDark = useDark()
|
|
async function toggleDark({ clientX, clientY }) {
|
|
function handler() {
|
|
appStore.toggleDark()
|
|
useToggle(isDark)()
|
|
}
|
|
|
|
if (!document.startViewTransition) {
|
|
return handler()
|
|
}
|
|
|
|
const clipPath = [
|
|
`circle(0px at ${clientX}px ${clientY}px)`,
|
|
`circle(${Math.hypot(
|
|
Math.max(clientX, window.innerWidth - clientX),
|
|
Math.max(clientY, window.innerHeight - clientY),
|
|
)}px at ${clientX}px ${clientY}px)`,
|
|
]
|
|
|
|
await document.startViewTransition(handler).ready
|
|
|
|
document.documentElement.animate(
|
|
{ clipPath: isDark.value ? clipPath.reverse() : clipPath },
|
|
{
|
|
duration: 500,
|
|
easing: 'ease-in',
|
|
pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`,
|
|
},
|
|
)
|
|
}
|
|
</script>
|