html 小程序九宫格抽奖,九宫格抽奖 js jquery 小程序 vue 插件(原创)

插件描述：九宫格抽奖,奖品文字图片颜色按钮均可配置，支持同步异步抽奖，概率前后端可控，自动根据 dpr 调整清晰度

更新时间：2020-12-24 09:23:29

在 Js / JQuery 中使用

方式 1：通过 script 标签引入

为了避免 CDN 链接出现异常或波动，我非常建议你缓存到本地或服务器

最新版本：https://cdn.jsdelivr.net/npm/lucky-canvas/dist/lucky-canvas.umd.min.js

指定版本：https://cdn.jsdelivr.net/npm/lucky-canvas@1.1.2/dist/lucky-canvas.umd.min.js

// 大转盘抽奖

let luckyWheel = new LuckyCanvas.LuckyWheel({

el: '#my-lucky',

width: '300px',

height: '300px',

}, {

// ...你的配置

})

// 九宫格抽奖

let luckyGrid = new LuckyCanvas.LuckyGrid({

el: '#my-lucky',

width: '300px',

height: '300px',

}, {

// ...你的配置

})

在 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')

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

width="300px"

height="300px"

...你的配置

/>

width="300px"

height="300px"

...你的配置

/>

#方式 2：通过 script 标签引入

为了避免 CDN 链接出现异常或波动，我非常建议你缓存到本地或服务器

vue2.x：最新版本： https://cdn.jsdelivr.net/npm/vue-luck-draw/dist/vue-luck-draw.umd.min.js

指定版本： https://cdn.jsdelivr.net/npm/vue-luck-draw@3.3.1/dist/vue-luck-draw.umd.min.js

vue3.x：最新版本： https://cdn.jsdelivr.net/npm/vue-luck-draw/vue3/vue-luck-draw.umd.min.js

指定版本： https://cdn.jsdelivr.net/npm/vue-luck-draw@3.3.1/vue3/vue-luck-draw.umd.min.js

width="300px"

height="300px"

...你的配置

/>

width="300px"

height="300px"

...你的配置

/>

new Vue({

el: '#app'

data () {

return {}

}

})

在 uni-app 中使用

当前 uni-app 中各端适配情况H5端 编译正常

app端 待测试

微信小程序 编译正常

其他小程序 待测试

#方式 1：通过 import 引入

#1. 安装插件

你可以选择通过 HBuilderX 导入插件：https://ext.dcloud.net.cn/plugin?id=3499

也可以选择通过 npm / yarn 安装# npm 安装：

npm install uni-luck-draw

# yarn 安装：

yarn add uni-luck-draw

#2. 引入并使用

width="600rpx"

height="600rpx"

...你的配置

/>

width="600rpx"

height="600rpx"

...你的配置

/>

// npm 下载会默认到 node_modules 里面，直接引入包名即可

import LuckyWheel from 'uni-luck-draw/lucky-wheel' // 大转盘

import LuckyGrid from 'uni-luck-draw/lucky-grid' // 九宫格

// 如果你是通过 HBuilderX 导入插件，那你需要指定一下路径

// import LuckyWheel from '@/components/uni-luck-draw/lucky-wheel' // 大转盘

// import LuckyGrid from '@/components/uni-luck-draw/lucky-grid' // 九宫格

export default {

// 注册组件

components: { LuckyWheel, LuckyGrid },

}

#3. 我这里提供了一个最基本的 demo 供你用于尝试

ref="luckyWheel"

width="600rpx"

height="600rpx"

:blocks="blocks"

:prizes="prizes"

:buttons="buttons"

:defaultStyle="defaultStyle"

@start="startCallBack"

@end="endCallBack"

/>

import LuckyWheel from 'uni-luck-draw/lucky-wheel'

export default {

components: { LuckyWheel },

data () {

return {

blocks: [

{ padding: '13px', background: '#d64737' }

],

prizes: [

{ title: '1元红包', background: '#f9e3bb', fonts: [{ text: '1元红包', top: '18%' }] },

{ title: '100元红包', background: '#f8d384', fonts: [{ text: '100元红包', top: '18%' }] },

{ title: '0.5元红包', background: '#f9e3bb', fonts: [{ text: '0.5元红包', top: '18%' }] },

{ title: '2元红包', background: '#f8d384', fonts: [{ text: '2元红包', top: '18%' }] },

{ title: '10元红包', background: '#f9e3bb', fonts: [{ text: '10元红包', top: '18%' }] },

{ title: '50元红包', background: '#f8d384', fonts: [{ text: '50元红包', top: '18%' }] },

],

buttons: [

{ radius: '50px', background: '#d64737' },

{ radius: '45px', background: '#fff' },

{ radius: '41px', background: '#f6c66f', pointer: true },

{

radius: '35px', background: '#ffdea0',

fonts: [{ text: '开始\n抽奖', fontSize: '18px', top: -18 }]

}

],

defaultStyle: {

fontColor: '#d64737',

fontSize: '14px'

},

}

},

methods: {

// 点击抽奖按钮触发回调

startCallBack () {

// 先开始旋转

this.$refs.luckyWheel.play()

// 使用定时器来模拟请求接口

setTimeout(() => {

// 3s后得到中奖索引

let index = Math.random() * 6 >> 0

// 缓慢停止游戏

this.$refs.luckyWheel.stop(index)

}, 3000)

},

// 抽奖结束触发回调

endCallBack (prize) {

// 奖品详情

console.log(prize)

}

}

}