原生js vue 抽奖插件 仿京东大转盘抽京豆（原创）

 查看演示  website  立即下载

更新时间：2020-11-24 00:18:54

在 vue2.x / vue3.x 中使用

方式 1：通过 import 引入

首先安装插件

# npm 安装：
npm install vue-luck-draw
# yarn 安装：
yarn add vue-luck-draw

然后找到 main.js 引入插件并 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')

最后在组件内使用 <LuckyWheel />大转盘组件 或 <LuckyGrid />九宫格组件

<template>
  <div>
    <!-- 大转盘抽奖 -->
    <LuckyWheel
      style="width: 200px; height: 200px"
      ...你的配置
    />
    <!-- 九宫格抽奖 -->
    <LuckyGrid
      style="width: 200px; height: 200px"
      ...你的配置
    />
  </div>
</template>

方式 2：通过 script 标签引入

从下面的链接里下载一个叫luckdraw.umd.min.js的 js 文件, 然后使用 script 标签引入

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">
  <!-- 大转盘抽奖 -->
  <lucky-wheel
    style="width: 200px; height: 200px"
    ...你的配置
  />
  <!-- 九宫格抽奖 -->
  <lucky-grid
    style="width: 200px; height: 200px"
    ...你的配置
  />
</div>
<script src="./vue.min.js"></script>
<script src="./luckdraw.umd.min.js"></script>
<script>
  new Vue({
    el: '#app'
  })
</script>

边框 - blocks

为了使得大转盘始终是一个圆，所以这里不支持paddingLeft、paddingRight、paddingTop、paddingBottom等属性

blocks?: Array<object>

padding: string 内边距 （边框必须是等宽的, 所以 padding 只能输入一个值）
background: string 背景颜色 （可填写16进制颜色哈希值或 rgba）

关于绘制边框

• 第一个橘色的 block 的直径等于200px，等于父容器的宽

• 第二个红色的 block：直径等于180px，因为第一个 block 的padding上下左右同时挤出10px

• 第三个白色的 block：直径等于160px，因为第二个 block 的padding同样也挤出10px

• 最后白色 block 挤出的部分就是奖品区域了

web代码

<div id="my-lucky" style="width: 200px; height: 200px"></div>
<script src="../lucky-canvas.umd.min.js"></script>
<script>
  let luckyWheel = new LuckyCanvas.LuckyWheel('#my-lucky', {
    blocks: [
      { padding: '10px', background: '#ffc27a' },
      { padding: '10px', background: '#ff4a4c' },
      { padding: '0px', background: '#fff' }
    ]
  })
</script>

vue代码

<template>
  <LuckyWheel
    style="width: 200px; height: 200px"
    :blocks="blocks"
  /></template><script>export default {
  data () {
    return {
      blocks: [
        { padding: '10px', background: '#ffc27a' },
        { padding: '10px', background: '#ff4a4c' },
        { padding: '0px', background: '#fff' }
      ]
    }
  }}</script>

奖品 - prizes

奖品列表是一个数组，转盘会根据奖品数量来分配扇形区域

prizes?: Array<object> 奖品列表
background?: string 扇形背景色 （可继承 defaultStyle 背景色，默认为 '#fff'）
fonts?: Array<object> 文字列表
text: string 字体内容 （可以使用 \n 用来换行）
top?: string | number 距离顶部的高度 （格式为：20 | '20px' | '20%'，默认为 0）
fontColor?: string 字体颜色 （可继承 defaultStyle 字体颜色，默认为 '#000'）
fontSize?: string 字体大小(px) （可继承 defaultStyle 字体大小，默认为 '22px'）
fontStyle?: string 字体样式 （可继承 defaultStyle 字体样式，默认为 'sans-serif'）
fontWeight?: string 字体粗细 （可继承 defaultStyle 字体粗细，默认为 '400'）
lineHeight?: string 字体行高 （默认等于字体大小）
wordWrap?: boolean 文字自动换行 （默认为 true 开启，关闭时可以使用 \n 换行）
lengthLimit?: string | number 换行宽度限制 （格式为：90 | '90px' | '90%'，默认为 '90%'）
imgs?: Array<object> 图片列表
src: string 图片路径
top?: string | number 距离顶部的高度 （可以写 20px 也可以是 20%，默认为 0）
width?: string 图片宽度 （关于图片宽高有四种可能）
height?: string 图片高度 （关于图片宽高有四种可能）

1.宽高都未设置：则使用图片原大小；2.有宽度无高度：则高度随着宽度等比缩放；3.有高度无宽度：则宽度随着高度等比缩放；4.既有宽度也有高度：则图片宽高均等于设置的值（会被拉伸）

关于设置奖品

• 奖品区域为扇形，会平分整个大转盘并以顺时针方向绘制，建议配置不同的背景色方便区分

• 文字默认以扇形的中线居中，会自动随着扇形的旋转而旋转

• 2号扇形的top为100%，所以他的文字超出了原本的区域

web代码

<div id="my-lucky" style="width: 200px; height: 200px"></div><script src="../lucky-canvas.umd.min.js"></script><script>
  let luckyWheel = new LuckyCanvas.LuckyWheel('#my-lucky', {
    blocks: [{ padding: '10px', background: '#d64737' }],
    prizes: [
      { fonts: [{ text: '0' }], background: '#f8d384' },
      { fonts: [{ text: '1', top: '20px' }], background: '#f9e3bb' },
      { fonts: [{ text: '2', top: '100%' }], background: '#fff' }
    ],
  })</script>

vue代码

<template>
  <LuckyWheel
    style="width: 200px; height: 200px"
    :blocks="blocks"
    :prizes="prizes"
  /></template><script>export default {
  data () {
    return {
      blocks: [{ padding: '10px', background: '#d64737' }],
      prizes: [
        { fonts: [{ text: '0' }], background: '#f8d384' },
        { fonts: [{ text: '1', top: '20px' }], background: '#f9e3bb' },
        { fonts: [{ text: '2', top: '100%' }], background: '#fff' }
      ],
    }
  }}</script>

PREVIOUS:
NEXT:
基于amazeui实现的后台管理模板
jQuery幸运大转盘（原创）