ajax九宫格转盘抽奖,九宫格抽奖 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/[email protected]/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/[email protected]/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/[email protected]/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)
}
}
}