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

所属分类:其他-游戏

 2928  42  查看评论 (4)
分享到微信朋友圈
X
原生js  vue 抽奖插件  仿京东大转盘抽京豆(原创) ie兼容12

更新时间: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)

关于绘制边框

t2.png

  • 第一个橘色的 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.既有宽度也有高度:则图片宽高均等于设置的值(会被拉伸)

关于设置奖品

t.png

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

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

  • 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>
相关插件-游戏

jQuery扑克牌翻转抽奖游戏代码

jQuery点击开始自动排列扑克牌选择确认翻牌抽奖结果代码。这是一款简单的翻牌抽奖游戏代码。
  游戏
 14714  272

js版锅打灰太狼

原生js 代码注释很全,比较考验逻辑
  游戏
 24967  304

自由拼图游戏

可以选择多种难度,每个区块可以自由拖动。可兼容手机
  游戏
 31530  342

拼图小游戏,挑战高难度(原创)

利用jQuery写了一个拼图游戏小demo
  游戏
 20106  302

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    静而寒 0
    2021/3/20 11:12:28
    您好,目前能实现获奖区域大小通过后台配置scale的大小,实现不等分的情况吗
        ldqjs0
        2021/3/20 17:11:03
        不能, 并且我感觉这个需求没什么实际意义
        静而寒0
        2021/3/22 11:00:04
        谢谢,现在是需求是这样,所以来问一下.
        静而寒0
        2021/3/22 11:00:07
        谢谢,现在是需求是这样,所以来问一下.
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复