演示地址: http://www.siyueweb.cn/demo/vue-luck-draw
源码地址: https://100px.net/document/vue.html#方式-1-通过-import-引入
插件描述:一个基于vue的大转盘抽奖插件, 奖品/文字/颜色样式均可配置
更新时间:2020-09-25 12:14:42
使用 npm 安装:
1 | npm i vue-luck-draw |
使用 yarn 安装:
1 | yarn add vue-luck-draw |
方式1: 通过 import 引入
找到 main.js 引入插件并 use, 可实现全局引入<LuckyWheel />和<LuckyGrid />两个组件
1 2 | import LuckDraw from 'vue-luck-draw' Vue.use(LuckDraw) |
然后在 vue 模板里面就可以开始使用了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < template > < div > <!-- 大转盘抽奖 --> < LuckyWheel style = "width: 200px; height: 200px" ...你的配置 /> <!-- 九宫格抽奖 --> < LuckyGrid style = "width: 200px; height: 200px" ...你的配置 /> </ div > </ template > |
方式2: 通过 script 标签引入
从下面的链接里下载一个叫index.umd.min.js的 js 文件, 然后使用 script 标签引入
下载地址:
1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | < div id = "app" > <!-- 大转盘抽奖 --> < LuckyWheel style = "width: 200px; height: 200px" ...你的配置 /> <!-- 九宫格抽奖 --> < LuckyGrid style = "width: 200px; height: 200px" ...你的配置 /> </ div > < script src = "./vue.min.js" ></ script > < script src = "./index.umd.min.js" ></ script > < script > new Vue({ el: '#app' }) </ script > |
更新时间:2020-03-27 18:26:07
安装
1 | npm i vue-luck-draw |
先找到main.js引入插件并use
1 2 | import LuckDraw from 'vue-luck-draw' Vue.use(LuckDraw) |
然后就可以使用插件了, 以下是最基本的使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | < template > < div id = "app" > < LuckDraw v-model = "currIndex" :awards = "awards" @ start = "handleStart" @ end = "handleEnd" /> </ div > </ template > < script > export default { data () { return { currIndex: 0, // 奖品的索引 awards: [ // 奖品 { name: '价值5988元华为 P30pro', color: '#f9e3bb' }, { name: '价值398元车载空气净化器', color: '#f8d384' }, { name: '价值25元百叶帘遮阳挡', color: '#f9e3bb' }, { name: '16元油卡套餐红包', color: '#f8d384' }, { name: '5元油卡直冲红包', color: '#f9e3bb' }, { name: '3元话费直冲红包', color: '#f8d384' }, { name: '价值32元重力感应手机支架', color: '#f9e3bb' }, { name: '价值198元手提迷你车在保温冷藏箱', color: '#f8d384' }, ], } }, methods: { handleStart () { console.log('开始抽奖') }, handleEnd (index) { alert('恭喜您抽到大奖, 奖品为' + this.awards[this.currIndex].name) } } } </ script > |
但我提供了更多可配置的参数, 比如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | < template > < div id = "app" > <!-- 以下是默认配置参数, 可以根据个人需要进行修改 --> < LuckDraw v-model = "currIndex" :awards = "awards" :rate = "rate" :radius = "radius" :textFontSize = "textFontSize" :lineHeight = "lineHeight" :textColor = "textColor" :textMargin = "textMargin" :textPadding = "textPadding" :btnFontSize = "btnFontSize" :btnColor = "btnColor" :btnBorderColor1 = "btnBorderColor1" :btnBorderColor2 = "btnBorderColor2" :btnBorderColor3 = "btnBorderColor3" :btnBgColor = "btnBgColor" :btnText = "btnText" :btnRadius = "btnRadius" :borderColor = "borderColor" @ start = "handleStart" @ end = "handleEnd" /> </ div > </ template > < script > export default { data () { return { currIndex: 0, // 奖品的索引 rate: 80, // 转盘速率 radius: 180, // 转盘半径 textFontSize: '13px', // 文字大小 lineHeight: 20, // 文字行高 textColor: '#d64737', // 文字颜色 textMargin: 30, // 文字距离边框距离 textPadding: 0, // 文字补偿宽度 btnFontSize: '26px', // 按钮文字大小 btnColor: '#d64737', // 按钮文件颜色 btnBorderColor1: '#d64737', // 按钮外边框颜色 btnBorderColor2: '#ffffff', // 按钮内边框颜色 btnBorderColor3: '#f6c66f', // 按钮指针颜色 btnBgColor: '#ffdea0', // 按钮背景颜色 btnText: '抽奖', // 按钮内容 btnRadius: 60, // 按钮半径 borderColor: '#d64737', // 边框颜色 awards: [ // 奖品 { name: '价值5988元华为 P30pro', color: '#f9e3bb' }, { name: '价值398元车载空气净化器', color: '#f8d384' }, { name: '价值25元百叶帘遮阳挡', color: '#f9e3bb' }, { name: '16元油卡套餐红包', color: '#f8d384' }, { name: '5元油卡直冲红包', color: '#f9e3bb' }, { name: '3元话费直冲红包', color: '#f8d384' }, { name: '价值32元重力感应手机支架', color: '#f9e3bb' }, { name: '价值198元手提迷你车在保温冷藏箱', color: '#f8d384' }, ], } }, methods: { handleStart () { console.log('开始抽奖') }, handleEnd (index) { alert('恭喜您抽到大奖, 奖品为' + this.awards[this.currIndex].name) } } } </ script > |
实用工具: JSON字符串格式化 | js压缩代码格式化工具 | 异步XMLHttpRequests库axios.js文档 | vue-axios文档 | Go语言文档