GithubHelp home page GithubHelp logo

royalbis / vue-fortune-wheel Goto Github PK

View Code? Open in Web Editor NEW

This project forked from joffreyberrier/vue-fortune-wheel

0.0 0.0 0.0 237 KB

☸️👊 An easier fortune-wheel in Vue.js 👊☸️

License: MIT License

JavaScript 2.47% TypeScript 9.49% HTML 5.25% Vue 82.79%

vue-fortune-wheel's Introduction

vue3-fortune-wheel @1.1.7

👊 An easier fortune-wheel in Vue.js 👊

🔥 Vue3 + Typescript 🔥

Sandbox example

Open this link on a new tab

Edit vue-wheel

Installation

NPM / YARN

Install the package:

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"
/>

How to launch the Wheel ?

<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

This data corresponds to the id of your winning object. In my case an API returns me the id. If you are not in this case you can create a method that randomly chooses an id

Exemple of this method

randomGift() {
  return Math.floor(Math.random() * this.data.lengh) + 1
}

animDuration

  • Type: Number
  • Default: 5000

How many millisecondes you want the wheel to turn

ModelValue

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

Example :

data: [
  {
    id: 1,
    value: "Gift 1",
    color: '#7d7db3',
    bgColor: '#ffffff'
  },
  {
    id: 2,
    value: "Gift 2",
    color: '#ffffff',
    bgColor: '#ffffff'
  },
  {
    id: 3,
    value: "Gift 3",
    color: '#c92729',
    bgColor: '#ffffff'
  },
],

ImgParams

  • Type: Object
  • Default: {}

Possible to add an image in the center

Example :

  {
    src: string
    width: number
    height: number
  }

Contributing to development 💁‍♂️💁‍♀️

  • First create an issue
  • Fork the repo from github.
  • Clone your forked repo and run: yarn or npm i
  • Then, make your changes on any branch you want and push it.
  • Naming your branch with the gitflow convention:
    • Feature branches? [feature/issueId]
    • Release branches? [release/issueId]
    • Hotfix branches? [hotfix/issueId]
    • Support branches? [support/issueId]
  • Finally, open a pull request on the official repo, using the source branch from your forked repo.

vue-fortune-wheel's People

Contributors

joffreyberrier avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.