vue-fortune-wheel-extended v0.2.7

Vue-Fortune-Wheel

组件名称: Wheel of Fortune, 命运之轮, 幸运转盘

应用场景: 抽奖

Install

yarn add vue-fortune-wheel

or

npm install vue-fortune-wheel

Language

English (By Google Translate)| 中文

Demo (App.vue)

online

https://xiaolin1995.github.io/vue-fortune-wheel/demo/

Usage

<template>
  <div>
    <!-- type: image -->
    <FortuneWheel
      style="width: 500px"
      type="image"
      :prizes="prizes"
      :angleBase="-10"
      @rotateStart="onImageRotateStart"
      @rotateEnd="onRotateEnd"
    >
      <img slot="wheel" src="@/assets/wheel.png" />
      <img slot="button" src="@/assets/button.png" />
    </FortuneWheel>

    <!-- type: canvas -->
    <FortuneWheel
      style="width: 500px"
      borderColor="#584b43"
      :borderWidth="6"
      :prizes="prizes"
      :verify="cavansVerify"
      @rotateStart="onCanvasRotateStart"
      @rotateEnd="onRotateEnd"
    />
  </div>
</template>

import FortuneWheel from 'vue-fortune-wheel'
import 'vue-fortune-wheel/lib/vue-fortune-wheel.css'

export default {
  components: {
    FortuneWheel
  },
  data() {
    return {
      cavansVerify: true, // canvas 模式的转盘是否开启验证
      prizes: [
        {
          id: 1, //* 每个奖品唯一的 id, 大于 0 的整数
          name: 'Blue', // 奖品名, type 为 canvas 时的显示值 (type 为 image 时无需此参数)
          value: 'Blue\' value', //* 奖品值, 旋转结束后的返回值
          bgColor: '#45ace9', // 背景色 (type 为 image 时无需此参数)
          color: '#ffffff', // 字体色 (type 为 image 时无需此参数)
          probability: 30 //* 概率，最多保留 4 位小数 （所有奖品的概率和必须为 100）
        },
        {
          id: 2,
          name: 'Red',
          value: 'Red\' value',
          bgColor: '#dd3832',
          color: '#ffffff',
          probability: 40
        },
        {
          id: 3,
          name: 'Yellow',
          value: 'Yellow\' value',
          bgColor: '#fef151',
          color: '#ffffff',
          probability: 30
        }
      ]
    }
  },
  methods: {
    onImageRotateStart() {
      console.log('onRotateStart')
    },
    onCanvasRotateStart(rotate) {
      if (this.canvasVerify) {
        const verified = true // true: 测试通过验证, false: 测试未通过验证
        this.DoServiceVerify(verified, 2000).then((verifiedRes) => {
          if (verifiedRes) {
            console.log('验证通过, 开始旋转')
            rotate() // 调用回调, 开始旋转
            this.canvasVerify = false // 关闭验证模式
          } else {
            alert('未通过验证')
          }
        })
        return
      }
      console.log('onCanvasRotateStart')
    },
    onRotateEnd(prize) {
      alert(prize.value)
    },
    // 模拟请求后端接口, verified: 是否通过验证, duration: 延迟时间
    DoServiceVerify(verified, duration) {
      return new Promise((resove) => {
        setTimeout(() => {
          resove(verified)
        }, duration)
      })
    }
  }
}

FortuneWheel Events

FortuneWheel Attributes