WebSleeping ​

<template>
  <el-button @click="startSleep">Start Screen Saver</el-button>
  <p style="margin-top: 8px; color: #909399">
    Click the button to activate. Move the mouse to dismiss.
  </p>
  <web-sleeping ref="sleepRef" :screen-protect-time="3000" manual />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const sleepRef = ref()

function startSleep() {
  sleepRef.value.show()
}
</script>

<template>
  <div style="display: flex; gap: 16px">
    <el-button @click="startSleep('text')">Text</el-button>
    <el-button @click="startSleep('lightwave')">Lightwave</el-button>
    <el-button @click="startSleep('taijiibagua')">Taiji Bagua</el-button>
  </div>
  <p style="margin-top: 8px; color: #909399">
    Current theme: {{ theme }}. Wait 3 seconds to see the screen saver. Move the
    mouse to dismiss.
  </p>
  <web-sleeping
    ref="sleepRef"
    :screen-protect-theme="theme"
    :screen-protect-time="3000"
    manual
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const sleepRef = ref()

const theme = ref<'text' | 'lightwave' | 'taijiibagua'>('text')
function startSleep(val: 'text' | 'lightwave' | 'taijiibagua') {
  theme.value = val
  sleepRef.value.show()
}
</script>