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

纠结要不要继续卷点一下轮盘替你做决定。script setup langts 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 classbox h2摸鱼决策轮盘/h2 textarea v-modelinput rows3 / p classpick{{ items[idx] || 请至少输入2项 }}/p p{{ msg }}/p button clickstart :disabledrolling开始/button button clickstop :disabled!rolling停止/button button clickaddPreset加一个选项/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运行的。