`摸鱼决策轮盘`【vue3+ts前端实战小项目】

纠结要不要继续卷？点一下，轮盘替你做决定。

<script setup lang="ts">
import { ref, computed } from 'vue'
const input = ref('写文档,改Bug,摸鱼5分钟,喝水,拉伸,看技术文章')
const items = computed(() => input.value.split(',').map(s => s.trim()).filter(Boolean))
const idx = ref(0), rolling = ref(false), msg = ref('点击开始')
let timer: number | null = null
function start() {
  if (rolling.value || items.value.length < 2) return
  rolling.value = true; msg.value = '命运加载中...'
  timer = window.setInterval(() => idx.value = (idx.value + 1) % items.value.length, 80)
}
function stop() {
  if (!rolling.value || !timer) return
  window.clearInterval(timer); timer = null; rolling.value = false
  const pick = items.value[idx.value]
  msg.value = `今日指令：${pick}`
}
function addPreset() { input.value += ',下楼晒太阳' }
</script>

<template>
  <main class="box">
    <h2>摸鱼决策轮盘</h2>
    <textarea v-model="input" rows="3" />
    <p class="pick">{{ items[idx] || '请至少输入2项' }}</p>
    <p>{{ msg }}</p>
    <button @click="start" :disabled="rolling">开始</button>
    <button @click="stop" :disabled="!rolling">停止</button>
    <button @click="addPreset">加一个选项</button>
  </main>
</template>

<style scoped>
.box{max-width:520px;margin:32px auto;display:grid;gap:10px}
textarea{width:100%;padding:8px}.pick{font-size:28px;font-weight:700;color:#42b883}
button{margin-right:8px}
</style>

完整资源包点击下载,可直接npm运行的。