90 lines
1.9 KiB
Vue
90 lines
1.9 KiB
Vue
<template>
|
|
<div class="flex-center text-18px cursor-pointer" @click="handleSwitch">
|
|
<icon-mdi-moon-waning-crescent v-if="darkMode" />
|
|
<icon-mdi-white-balance-sunny v-else />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
defineOptions({ name: 'DarkModeSwitch' });
|
|
|
|
interface Props {
|
|
/** 暗黑模式 */
|
|
dark?: boolean;
|
|
/** 自定义暗黑模式动画过渡 */
|
|
customizeTransition?: boolean;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
dark: false
|
|
});
|
|
|
|
interface Emits {
|
|
(e: 'update:dark', darkMode: boolean): void;
|
|
}
|
|
|
|
const emit = defineEmits<Emits>();
|
|
|
|
const darkMode = computed({
|
|
get() {
|
|
return props.dark;
|
|
},
|
|
set(newValue: boolean) {
|
|
emit('update:dark', newValue);
|
|
}
|
|
});
|
|
|
|
async function handleSwitch(event: MouseEvent) {
|
|
const x = event.clientX;
|
|
const y = event.clientY;
|
|
|
|
if (!props.customizeTransition || !document.startViewTransition) {
|
|
darkMode.value = !darkMode.value;
|
|
return;
|
|
}
|
|
|
|
const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
|
|
|
|
const transition = document.startViewTransition(() => {
|
|
darkMode.value = !darkMode.value;
|
|
});
|
|
|
|
await transition.ready;
|
|
|
|
const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];
|
|
|
|
document.documentElement.animate(
|
|
{
|
|
clipPath: darkMode.value ? clipPath : [...clipPath].reverse()
|
|
},
|
|
{
|
|
duration: 300,
|
|
easing: 'ease-in',
|
|
pseudoElement: darkMode.value ? '::view-transition-new(root)' : '::view-transition-old(root)'
|
|
}
|
|
);
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation: none;
|
|
mix-blend-mode: normal;
|
|
}
|
|
::view-transition-old(root) {
|
|
z-index: 9999;
|
|
}
|
|
::view-transition-new(root) {
|
|
z-index: 1;
|
|
}
|
|
.dark::view-transition-old(root) {
|
|
z-index: 1;
|
|
}
|
|
.dark::view-transition-new(root) {
|
|
z-index: 9999;
|
|
}
|
|
</style>
|