valaxy-theme-sakura/stores/wallpaper.ts

<h1 align="center">valaxy-theme-sakura</h1> <pre align="center"> 一个简单、个性化、可爱的动漫风格博客主题 ❥(ゝω・✿ฺ) </pre>

import { ref } from 'vue'
import { useStorage } from '@vueuse/core'

export function useWallpaper() {
  const wallpaperIndex = useStorage(`wallpaperKey-hero`, 0)
  const wallpaperLength = ref<number>(0)
  const wallpaperOperation = ref<'prevMedia' | 'nextMedia' | ''>()
  const wallpaperIsPlaying = ref(false)

  function prevWallpaper() {
    wallpaperOperation.value = 'prevMedia'
    wallpaperIndex.value = (wallpaperIndex.value - 1 + wallpaperLength.value) % wallpaperLength.value
    setTimeout(() => {
      wallpaperOperation.value = ''
    }, 0)
  }

  function nextWallpaper() {
    wallpaperOperation.value = 'nextMedia'
    wallpaperIndex.value = (wallpaperIndex.value + 1) % wallpaperLength.value
    setTimeout(() => {
      wallpaperOperation.value = ''
    }, 0)
  }

  function togglePlayPause() {
    wallpaperIsPlaying.value = !wallpaperIsPlaying.value
  }

  return { wallpaperIndex, wallpaperLength, wallpaperOperation, wallpaperIsPlaying, prevWallpaper, nextWallpaper, togglePlayPause }
}