shishengliang/log-lottery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(layout): 添加全屏切换功能 #96

Browse Source
This commit is contained in:
LOG1997
2025-12-11 20:59:16 +08:00
parent 54ce42ff51
commit bfc593fa8e
3 changed files with 59 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/layout/RightButton/index.vue
View File

@@ -1,18 +1,19 @@
<script setup lang='ts'>
import { ref } from 'vue'
import { useFullscreen } from '@vueuse/core'
import { Maximize, Minimize } from 'lucide-vue-next'
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'
import { usePlayMusic } from './usePlayMusic'
const { playMusic, currentMusic, nextPlay } = usePlayMusic()
const { isFullscreen, toggle: toggleScreen } = useFullscreen()
const { t } = useI18n()
const router = useRouter()
const route = useRoute()
const settingRef = ref()
// const audio = ref(new Audio())
// const localMusicListValue = ref(localMusicList)
const fullScreenRef = ref()
function enterConfig() {
router.push('/log-lottery/config')
@@ -20,10 +21,32 @@ function enterConfig() {
function enterHome() {
router.push('/log-lottery')
}
onMounted(() => {
settingRef.value.addEventListener('mouseenter', () => {
fullScreenRef.value.style.display = 'block'
})
settingRef.value.addEventListener('mouseleave', () => {
fullScreenRef.value.style.display = 'none'
})
})
</script>
<template>
<div ref="settingRef" class="flex flex-col gap-3">
<div ref="fullScreenRef" class="tooltip tooltip-left hidden" @click="toggleScreen">
<div
v-if="isFullscreen"
class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
>
<Minimize />
</div>
<div
v-else
class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
>
<Maximize />
</div>
</div>
<div v-if="route.path.includes('/config')" class="tooltip tooltip-left" :data-tip="t('tooltip.toHome')">
<div
class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
@@ -40,7 +63,6 @@ function enterHome() {
<svg-icon name="setting" />
</div>
</div>
<div class="tooltip tooltip-left" :data-tip="currentMusic.item ? `${currentMusic.item.name}\n\r ${t('tooltip.nextSong')}` : t('tooltip.noSongPlay')">
<div
class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"