An Easier Spinning Fortune Wheel Animation For Vue 3

Vue3 fortune wheel is an easy-to-use fortune wheel component for Vue.js 3 and is written in TypeScript.

Must read: A Free Online Spinning Wheel App Written in jQuery | Lucky Spin

How to make use of it:

Installation:

npm install vue3-fortune-wheel --save
yarn add vue3-fortune-wheel
import { Wheel } from "vue3-fortune-wheel";
import type { Datas, imgParams } from "vue3-fortune-wheel";

export default {
  components: {
    Wheel,
  },
};
<Wheel
  :gift="gift"
  :imgParams="logo"
  @done="done"
  ref="wheel"
  v-model="data"
/>

Usage

<template>
  <Wheel
    :gift="gift"
    :imgParams="logo"
    @done="done"
    ref="wheel"
    v-model="data"
  />
</template>

<script>
export default defineComponent({
  setup() {
    const wheel = ref(null);
    const launchWheel = () => {
      wheel.value.spin();
    };
    
    return { launchWheel }
  }
})
<script>

Props/Options

Gift

  • Type: Number
  • Default: null

animDuration

  • Type: Number
  • Default: 5000

How many milliseconds do you want the wheel to turn

Must Read: Angular Prize-Winning Spinning Wheel Javascript | ngx-wheel

Data

  • Type: Array
  • Default: []
  • id: number
  • value: string
  • color: string
  • bgColor: string

ImgParams

  • Type: Object
  • Default: {}

See Also –

Canvas-Based JavaScript UI Element Implementing Touch, Keyboard, Mouse, and Scroll Wheel Support
Simple Design and Smooth Interface on PC / Mobile Browser | Simple Wheel Picker
Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements


See Demo And Download

Official Website(joffreyBerrier): Click Here

This superior jQuery/javascript plugin is developed by joffreyBerrier. For extra Advanced Usage, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

responsive-accordion-ui

Responsive Accordion UI Design using HTML CSS and JavaScript

Responsive Accordion is a responsive and beautiful-looking accordion user interface with smooth transitions. Designed with HTML, CSS (SCSS), and a bit of JavaScript. Stunning accordion user interface…

bootstrap-5-dark-theme

Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…