vue3-fortune-wheel v2.0.5

👊 An easy-to-use fortune wheel component for Vue.js 3 👊

🔥 Built with Vue 3 + TypeScript 🔥

Codesandbox

Preview

Features

• Customizable wheel segments
• Animated spinning
• Optional center image
• TypeScript support
• Accessible (with ARIA attributes)

Installation

pnpm add vue3-fortune-wheel

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { FortuneWheel } from 'vue3-fortune-wheel'
import type { Data, ImgParams } from 'vue3-fortune-wheel'

const gift = ref(2)
const wheel = ref<InstanceType<typeof FortuneWheel> | null>(null)
const data = ref<Data[]>([
  { id: 1, value: 'Gift 1', bgColor: '#7d7db3', color: '#ffffff' },
  { id: 2, value: 'Gift 2', bgColor: '#ffffff', color: '#000000' }
])

// Optional: Center image
const logo: ImgParams = {
  src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/2367px-Vue.js_Logo_2.svg.png',
  width: 100,
  height: 120
}

const hasMiddleCircle = true

const done = (result: Data) => {
  console.log('Spin completed:', result)
}
</script>

<template>
  <FortuneWheel
    ref="wheel"
    v-model="gift"
    :middle-circle="hasMiddleCircle"
    :img-params="logo"
    :data="data"
    @done="done"
  />
</template>

API

Props

| Prop | Type | Default | Description | | ------------ | ----------- | ------- | ----------------------------------------- | | v-model | number | null | ID of the winning item | | data | Data[] | [] | Array of wheel segments | | animDuration | number | 5000 | Spin animation duration in milliseconds | | imgParams | ImgParams | {} | Configuration for center image (optional) | | middleCircle | boolean | true | Show/hide middle circle |

Events

| Event | Payload | Description | | ----- | ------- | ---------------------------------- | | done | Data | Emitted when the spin is completed |

Methods

| Method | Description | | ------ | --------------------- | | spin() | Starts the wheel spin |

Types

interface Data {
  id: number
  value: string
  color: string
  bgColor: string
}

interface ImgParams {
  src: string
  width: number
  height: number
}

Spinning the Wheel

Use the ref to call the spin method:

const wheel = ref<InstanceType<typeof FortuneWheel> | null>(null)

const launchWheel = () => {
  wheel.value?.spin()
}

Customization

Random Winner Selection

If you need to randomly select a winner, you can use a method like this:

const randomGift = () => {
  return Math.floor(Math.random() * data.value.length) + 1
}

Development

Setup

1. Fork the repository
2. Clone your fork: git clone https://github.com/YOUR_USERNAME/vue3-fortune-wheel.git
3. Install dependencies: pnpm install

Running Tests

pnpm run test:unit

Contributing

1. Create an issue describing the feature or bug
2. Fork the repo and create a branch following the gitflow convention:
   • Feature branches: feature/issueId
   • Release branches: release/issueId
   • Hotfix branches: hotfix/issueId
   • Support branches: support/issueId
3. Make your changes and push to your fork
4. Open a pull request to the main repository

License

MIT License

Support

If you have any questions or need help, please open an issue on the GitHub repository.

Made with ❤️ by Joffrey Berrier