Build a Vue.js 3 Random Wheel Spinner App with Vue-Wheel-Spinner in Browser Using TS

npm i vue-wheel-spinner

App.vue

<template>
  <VueWheelSpinner
      ref="spinner"
      class="spinner"
      :slices="slices"
      :winner-index="defaultWinner"
      :cursor-angle="cursorAngle"
      :cursor-position="cursorPosition"
      :cursor-distance="cursorDistance"
      @spin-start="onSpinStart"
      @spin-end="onSpinEnd">

    <template #cursor>
      <img class="cursor-img" :src="cursorImage" alt="Cursor">
    </template>

    <template #default>
      <button
          class="spin-button"
          :disabled="isSpinning"
          @click="handleSpinButtonClick">
        Spin
      </button>
    </template>

  </VueWheelSpinner>

</template>

<script>
  import VueWheelSpinner from 'vue-wheel-spinner';
  import cursorImage from './assets/vue.svg';

  export default {
    components: {
      VueWheelSpinner
    },
    data() {
      return {
        winnerResult: null,
        slices: [
          {color: '#eb4d4b', text: 'Slice 1'},
          {color: '#f0932b', text: 'Slice 2'},
          {color: '#f9ca24', text: 'Slice 3'},
          {color: '#badc58', text: 'Slice 4'},
          {color: '#7ed6df', text: 'Slice 5'},
          {color: '#e056fd', text: 'Slice 6'}
        ],
        isSpinning: false,
        defaultWinner: 0,
        cursorImage,
        cursorAngle: 0,
        cursorPosition: 'edge',
        cursorDistance: 0
      };
    },
    methods: {
      handleSpinButtonClick() {
        this.$refs.spinner.spinWheel(this.defaultWinner);
      },
      spinFor(index) {
        this.defaultWinner = index;
        this.$refs.spinner.spinWheel(index);
      },
      onSpinStart() {
        this.winnerResult = null;
        this.isSpinning = true;
      },
      onSpinEnd(winnerIndex) {
        this.isSpinning = false;
        this.winnerResult = this.slices[winnerIndex];
      }
    }
  };
</script>

<style>
.spinner{
  width:300;
  height:100
}
  .cursor-img {
    width: 50px;
    aspect-ratio: 1 / 1;
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.19));
  }

  .spin-button {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    font-size: 20px;
    cursor: pointer;
    background: #eb4d4b;
    border-radius: 50%;
    transition: all 150ms;
    border: 10px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white !important;
    box-shadow: inset -3px -3px 2px 2px rgba(0, 0, 0, 0.19), 3px 3px 2px 2px rgba(0, 0, 0, 0.19);
    z-index: 11;
    position: relative;
    user-select: none;
  }

  .spin-button:hover {
    box-shadow: inset -5px -5px 2px 2px rgba(0, 0, 0, 0.19), 3px 3px 2px 2px rgba(0, 0, 0, 0.19);
  }

  .spin-button:active {
    box-shadow: inset 3px 3px 2px 2px rgba(0, 0, 0, 0.19), 3px 3px 2px 2px rgba(0, 0, 0, 0.19);
  }

  .spin-button:disabled {
    background: #ccc;
    cursor: not-allowed;
    pointer-events: none;
  }
</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

<VueWheelSpinner

ref="spinner"

class="spinner"

:slices="slices"

:winner-index="defaultWinner"

:cursor-angle="cursorAngle"

:cursor-position="cursorPosition"

:cursor-distance="cursorDistance"

@spin-start="onSpinStart"

@spin-end="onSpinEnd">

</template>

<button

class="spin-button"

:disabled="isSpinning"

@click="handleSpinButtonClick">

Spin

</button>

</template>

</VueWheelSpinner>

</template>

import VueWheelSpinner from 'vue-wheel-spinner';

import cursorImage from './assets/vue.svg';

export default {

components: {

VueWheelSpinner

data() {

return {

winnerResult: null,

slices: [

{color: '#eb4d4b', text: 'Slice 1'},

{color: '#f0932b', text: 'Slice 2'},

{color: '#f9ca24', text: 'Slice 3'},

{color: '#badc58', text: 'Slice 4'},

{color: '#7ed6df', text: 'Slice 5'},

{color: '#e056fd', text: 'Slice 6'}

isSpinning: false,

defaultWinner: 0,

cursorImage,

cursorAngle: 0,

cursorPosition: 'edge',

cursorDistance: 0

};

methods: {

handleSpinButtonClick() {

this.$refs.spinner.spinWheel(this.defaultWinner);

spinFor(index) {

this.defaultWinner = index;

this.$refs.spinner.spinWheel(index);

onSpinStart() {

this.winnerResult = null;

this.isSpinning = true;

onSpinEnd(winnerIndex) {

this.isSpinning = false;

this.winnerResult = this.slices[winnerIndex];

}

};

</script>

<style>

.spinner{

width:300;

height:100

}

.cursor-img {

width: 50px;

aspect-ratio: 1 / 1;

filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.19));

}

.spin-button {

width: 100px;

height: 100px;

margin: 0 auto;

aspect-ratio: 1 / 1;

font-size: 20px;

cursor: pointer;

background: #eb4d4b;

border-radius: 50%;

transition: all 150ms;

border: 10px solid white;

display: flex;

align-items: center;

justify-content: center;

font-weight: 600;

color: white !important;

box-shadow: inset -3px -3px 2px 2px rgba(0, 0, 0, 0.19), 3px 3px 2px 2px rgba(0, 0, 0, 0.19);

z-index: 11;

position: relative;

user-select: none;

}

.spin-button:hover {

box-shadow: inset -5px -5px 2px 2px rgba(0, 0, 0, 0.19), 3px 3px 2px 2px rgba(0, 0, 0, 0.19);

}

.spin-button:active {

box-shadow: inset 3px 3px 2px 2px rgba(0, 0, 0, 0.19), 3px 3px 2px 2px rgba(0, 0, 0, 0.19);

}

.spin-button:disabled {

background: #ccc;

cursor: not-allowed;

pointer-events: none;

}

</style>

Build a Vue.js 3 Random Wheel Spinner App with Vue-Wheel-Spinner in Browser Using TS

Comments

Leave a Reply Cancel reply

Archives