0.3.3 • Published 2 years ago

vue3-roulette v0.3.3

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

Vue3 Roulette

A customizable and flexible fortune wheel for vue3

Demo

https://roulette.nitocode.com/

See also: codesandbox template

Installation

Using npm

npm i --save vue3-roulette

Usage

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { Roulette } from 'vue3-roulette'

createApp(App).component("roulette", Roulette).mount('#app')

vuejs html template

<Roulette ref="wheel" :items="items" @click="launchWheel" />

vuejs script

Using the sfc syntax

<script setup>
import { ref } from 'vue'
const wheel = ref(null);
const items = [
  { id: 1, name: "Banana", htmlContent: "Banana", textColor: "", background: "" },
  { id: 2, name: "Apple", htmlContent: "Apple", textColor: "", background: "" },
  { id: 3, name: "Orange and Purple", htmlContent: "Orange<br>and Purple", textColor: "", background: "" },
  { id: 4, name: "Cherry", htmlContent: "Cherry", textColor: "", background: "" },
];

function launchWheel (){
  wheel.value.launchWheel();
}
</script>

Events API

wheel-start and wheel-end which provide the item selected

<Roulette 
  ref="wheel" :items="items" @click="launchWheel" 
  @wheel-start="wheelStartedCallback"
  @wheel-end="wheelEndedCallback"
/>

Methods API

Composition API

wheel.value.launchWheel();
wheel.value.reset();

Option API

this.$refs.wheel.launchWheel();
this.$refs.wheel.reset();

Props API (Wheel)

PropsTypeRequiredDefaultOptionsDetails
itemsObjectyes-4 items minimum
first-item-indexObjectno{ value: 0 }
wheel-result-indexObjectno{ value: null }from 0 to items length
centered-indicatorBooleannofalse
indicator-positionStringno"top""top" | "right" | "bottom" | "left"
sizeNumberno300size unit: pixel
display-shadowBooleannofalse
durationNumberno4duration unit: seconds
result-variationNumberno0number between 0 and 100varies the result angle to fake wheel smoothness
easingStringno"ease""ease" | "bounce"wheel animation
counter-clockwiseBooleannofalserotation direction
horizontal-contentBooleannofalsetext item orientation
display-borderBooleannofalse
display-indicatorBooleannofalse

Props API (Wheel base)

PropsTypeRequiredDefaultOptionsDetails
base-displayBooleannofalse
base-sizeNumberno100size unit: pixel
base-display-shadowBooleannofalse
base-display-indicatorBooleannofalse
base-backgroundStringno""rgb(100,0,0) | red | #FF0000

Slots

You can use your own html for the wheel base

<Roulette ref="wheel" :items="items" @click="launchWheel">
  <template #baseContent>
    <div v-html="yourHtml"></div>
  </template>
</Roulette>

Contribution

Project setup

npm install

Compiles and hot-reloads for development

npm run serve
0.3.0

2 years ago

0.3.2

2 years ago

0.3.1

2 years ago

0.3.3

2 years ago

0.2.0

4 years ago

0.1.0

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago