ref 拿到的是 dom 元素或组件实例：若 ref 指向 div，则为原生 dom，可直接操作 style.transform；若指向封装组件（如 ），则为组件实例，需调用其暴露的 play() 或 stopat() 方法。
Vue 中用 ref 控制抽奖转盘的停止位置，核心是**把旋转角度精确算出来，并触发一次带目标角度的 transform 变换**，而不是靠“打断动画”或“强行截停”。ref 本身只是拿到 DOM 或组件实例的引用，真正起作用的是你传给它的角度值和动画逻辑。
ref 拿到的是什么？先明确对象
如果你 ref 的是转盘容器（比如一个 div），那它就是原生 DOM 元素，你可以直接操作 style.transform；
如果你 ref 的是封装好的转盘组件（如 <luckywheel ref="wheel"></luckywheel>），那它通常是 Vue 组件实例，需要调用其暴露的方法（如 play(targetIndex) 或 stopAt(angle)）。
常见误区：直接给 ref.value.style.transform 赋值后不加 transition，会导致瞬间跳转、无动画；或者没清掉之前的 transition，导致角度叠加错乱。
关键：计算目标停止角度要含“惯性圈数 + 精准偏移”
纯靠 index 定位不够——用户需要视觉上“指针正对奖品中心”，而奖品扇区有宽度。标准做法是：
- 设总奖品数为 n，则每份扇区角度 = 360 / n
- 中奖奖品索引为 i（从 0 开始），理想停靠点应是该扇区的中心线，即偏移 (i + 0.5) * (360 / n)
- 为保证转动感，必须加至少 3–5 圈基础旋转（如 1800° = 5 × 360°），再叠加上述偏移
- 最终总旋转角度 = 1800 + (360 - (i + 0.5) * (360 / n))（顺时针转，让指针最终落在目标扇区正中）
例如 8 个奖品、抽中第 2 个（i=1）：360/8 = 45°，目标中心角 = (1 + 0.5) × 45 = 67.5°，基础圈数取 1800°，则总角度 = 1800 + (360 − 67.5) = 2092.5°。
ref 控制动画的两种典型写法
方式一：DOM 元素 ref + CSS transition
- 模板：
<div ref="wheelRef" class="wheel">...</div> - 脚本：
wheelRef.value.style.transition = 'transform 3.5s cubic-bezier(0.3, 0.9, 0.5, 1)'; - 执行：
wheelRef.value.style.transform = `rotate(${finalAngle}deg)`; - 监听结束：
wheelRef.value.addEventListener('transitionend', callback, { once: true });
方式二：组件 ref + 方法调用（推荐）
- 模板：
<luckywheel ref="wheel" :prizes="prizes"></luckywheel> - 脚本：
wheel.value?.play(i);或wheel.value?.stopAt(finalAngle); - 注意：确保组件已挂载（
onMounted后调用），且方法存在（查文档确认 API）
避坑提醒：ref 不是万能钥匙
如果 ref.value 是 Proxy（Vue 3 setup 中常见），而组件内部没把方法挂到 exposed 上，ref.value.play() 会报错。此时可：
- 改用
defineExpose在子组件中显式暴露控制方法 - 或用
getCurrentInstance().refs.xxx（仅限选项式 API 或调试时临时用） - 更稳妥的做法：用事件总线或 provide/inject 把控制权交由父组件统一调度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
