vue-luck-draw

A Vue component, can realize lucky draw through simple configuration

简体中文 · English

Docs & Demo

中文：https://100px.net/document/vue.html

English：If anyone can help translate the document, please contact me [email protected]

vue2.x or vue3.x is required

Method 1: With Import

1. Installation

# with npm：
npm install vue-luck-draw

# with yarn：
yarn add vue-luck-draw

2. Introducing component and use

// vue2.x
import LuckDraw from 'vue-luck-draw'
Vue.use(LuckDraw)

// vue3.x
import LuckDraw from 'vue-luck-draw/vue3'
createApp(App).use(LuckDraw).mount('#app')

3. Using to render turntable lottery or using to render grid lottery

<template>
  <div>
    <!-- turntable lottery -->
    <LuckyWheel
      style="width: 200px; height: 200px"
      ...your settings
    />
    <!-- grid lottery -->
    <LuckyGrid
      style="width: 200px; height: 200px"
      ...your settings
    />
  </div>
</template>

Method 2：Direct <script> Include

Download the luckdraw.umd.min.js from the link below and include with a script tag

• vue2.x：https://github.com/buuing/vue-luck-draw/tree/master/dist
• vue3.x：https://github.com/buuing/vue-luck-draw/tree/master/vue3

<div id="app">
  <!-- turntable lottery -->
  <lucky-wheel
    style="width: 200px; height: 200px"
    ...your settings
  />
  <!-- grid lottery -->
  <lucky-grid
    style="width: 200px; height: 200px"
    ...your settings
  />
</div>
<script src="./vue.min.js"></script>
<script src="./luckdraw.umd.min.js"></script>
<script>
  new Vue({
    el: '#app'
  })
</script>