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

您所在的位置：网站首页 › 京豆抽大奖 › 原生js vue 抽奖插件仿京东大转盘抽京豆（原创）

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

2024-07-12 18:24| 来源: 网络整理| 查看: 265

所属分类：其他-游戏

8865 79 查看评论 (6) 分享到微信朋友圈X 原生js vue 抽奖插件仿京东大转盘抽京豆（原创）

查看演示 website 立即下载

插件描述：一个基于原生 javript vue2 vue3 的大转盘抽奖插件

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

最后在组件内使用大转盘组件或九宫格组件

方式 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 new Vue({ el: '#app' })

边框 - blocks

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

blocks?: Array

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

关于绘制边框

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

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

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

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

web代码

let luckyWheel = new LuckyCanvas.LuckyWheel('#my-lucky', { blocks: [ { padding: '10px', background: '#ffc27a' }, { padding: '10px', background: '#ff4a4c' }, { padding: '0px', background: '#fff' } ] })

vue代码

export default { data () { return { blocks: [ { padding: '10px', background: '#ffc27a' }, { padding: '10px', background: '#ff4a4c' }, { padding: '0px', background: '#fff' } ] } }}

奖品 - prizes

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

prizes?: Array 奖品列表 background?: string 扇形背景色（可继承 defaultStyle 背景色，默认为 '#fff'） fonts?: Array 文字列表 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 图片列表 src: string 图片路径 top?: string | number 距离顶部的高度（可以写 20px 也可以是 20%，默认为 0） width?: string 图片宽度（关于图片宽高有四种可能） height?: string 图片高度（关于图片宽高有四种可能）

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

关于设置奖品

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

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

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

web代码

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' } ], })

vue代码

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' } ], } }} PREVIOUS: NEXT: 基于amazeui实现的后台管理模板 jQuery幸运大转盘（原创）相关插件-游戏查看更多