JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<div id="app">
    <fortune-wheel
      style="width: 500px"
      :canvas="canvasOptions"
      :prizes="prizes"
      :verify="cavansVerify"
      @rotateStart="onCanvasRotateStart"
      @rotateEnd="onRotateEnd"
      ></fortune-wheel>
</div>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/lib/vue-fortune-wheel.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vue-fortune-wheel.umd.js"></script>
        <script>
            // imports
            //import FortuneWheel from 'working link.js'

            //Vue.use()

            new Vue({
                el: '#app',
                components: {
                    'fortune-wheel': window['vue-fortune-wheel'].default,
                },
                  data() {
    return {
      cavansVerify: true, // Whether the turntable in canvas mode is enabled for verification
      canvasOptions: {
        borderWidth: 6,
        borderColor: '#584b43'
      },
      prizes: [
        {
          id: 1, //* The unique id of each prize, an integer greater than 0
          name: 'Blue', // Prize name, display value when type is canvas (this parameter is not needed when type is image)
          value: 'Blue\'s value', //* Prize value, return value after spinning
          bgColor: '#45ace9', // Background color (no need for this parameter when type is image)
          color: '#ffffff', // Font color (this parameter is not required when type is image)
          probability: 30, //* Probability, up to 4 decimal places (the sum of the probabilities of all prizes
          weight: 1 // Weight, if useWeight is true, the probability is calculated by weight (weight must be an integer), so probability is invalid
        },
        {
          id: 2,
          name: 'Red',
          value: 'Red\'s value',
          bgColor: '#dd3832',
          color: '#ffffff',
         ...