[分享]使用vue做转盘

转盘抽奖是一种常见但十分受欢迎的互动方式。一般情况下，转盘由页面自己绘制，互动效果不如动态实时绘制的转盘，其实这正是Vue.js的所长，Vue.js 将转盘绘制和状态更新剥离并分别封装，使得页面响应更...

转盘抽奖是一种常见但十分受欢迎的互动方式。一般情况下，转盘由页面自己绘制，互动效果不如动态实时绘制的转盘，其实这正是Vue.js的所长，Vue.js 将转盘绘制和状态更新剥离并分别封装，使得页面响应更为快速。

首先，我们需要安装Vue.js。

npm install vue 

然后，我们创建一个“转盘抽奖”Vue实例和初始数据。

var vm = new Vue({
  el: '#app',
  data: {
    prizes: ['一等奖', '二等奖', '三等奖', '无奖项'],
    isRolling: false,
    selected: -1
  }
}) 

其中，prizes为奖项数组；isRolling为是否旋转抽奖转盘；selected为当前所中奖项下标。

接下来，我们定义一个转盘旋转函数。

function startRolling() {
  vm.isRolling = true
  var index = 0
  var timer = setInterval(function() {
    if (index + 1 != vm.prizes.length) {
      index++
    } else {
      index = 0
    }
    vm.selected = index
  }, 50)
  setTimeout(function() {
    clearInterval(timer)
    vm.isRolling = false
  }, Math.random() * 5000 + 5000)
} 

该函数通过设定定时器实现抽奖转盘旋转效果，并在旋转结束后停止定时器。注意 Math.random() * 5000 + 5000可以随机生成停止时间，增强趣味性和随机性。

最后，我们在HTML页面上编写转盘模板。

<div id="app">
  <div class="wheel" v-bind:class="{'rolling': isRolling}" v-on:click="!isRolling && startRolling()">
    <ul>
      <li v-for="(prize, index) in prizes" v-bind:class="{'selected': selected == index}">
        <span>{{prize}}</span>
      </li>
    </ul>
  </div>
</div> 

我们在wheel元素中绑定rolling和click事件，并利用v-for指令渲染一个转盘抽奖实体。其中li元素中的样式class绑定selected数据以突显当前所中奖项，span元素展示奖项文字。

到这里，我们就可以利用Vue.js框架轻松实现转盘抽奖互动了！