官方文档 & Demo演示
English：If anyone can help translate the document, please contact me
ldq404@qq.com
-
在 js / jq 中使用 lucky-canvas
-
在 vue 中使用 vue-luck-draw
-
在 react 中使用 react-luck-draw
-
在 uni-app 中使用 uni-luck-draw
-
在 taro 中使用 taro-luck-draw
-
在 微信小程序 中使用 mini-luck-draw
在 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
width="200px"
height="200px"
...你的配置
/>
<!-- 九宫格抽奖 -->
<LuckyGrid
width="200px"
height="200px"
...你的配置
/>
</div>
</template>方式 2：通过 script 标签引入
为了避免 CDN 链接出现异常或波动，我非常建议你缓存到本地或服务器(✿◡‿◡)
-
vue2.x： https://cdn.jsdelivr.net/npm/vue-luck-draw@3.4/dist/vue-luck-draw.umd.min.js
-
vue3.x： https://cdn.jsdelivr.net/npm/vue-luck-draw@3.4/vue3/vue-luck-draw.umd.min.js
<div id="app">
<!-- 大转盘抽奖 -->
<lucky-wheel
width="200px"
height="200px"
...你的配置
/>
<!-- 九宫格抽奖 -->
<lucky-grid
width="200px"
height="200px"
...你的配置
/>
</div>
<script src="./vue.min.js"></script>
<script src="./vue-luck-draw.umd.min.js"></script>
<script>
new Vue({
el: '#app',
data () {
return {}
}
})
</script>