LuckDraw / Vue Luck Draw
Licence: bsd-3-clause
🎖🎖🎖 一个基于 vue2 / vue3 的【大转盘 / 九宫格】抽奖插件;🎉 A lucky draw plug-in based on vue2 / vue3;🎨 奖品 / 文字 / 图片 / 颜色 / 按钮均可配置,支持同步 / 异步抽奖,🎯 概率前 / 后端可控,自动根据 dpr 调整清晰度适配移动端
Stars: ✭ 1,056
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Luck Draw
Cnblogs
💘🍦🙈 残梦a博客园样式,本博客的样式一直在更新中,还会不断优化页面的加载速度,坚持每周都会更新自己的博客内容,坚持自己选择计算机的道路 -> https://www.cnblogs.com/sunhang32
Stars: ✭ 41 (-96.12%)
Mutual labels: canvas
Gomoku
this is a Gomoku game's client and server, which bulid by canvas and swoole
Stars: ✭ 44 (-95.83%)
Mutual labels: canvas
Smileyrating
SmileyRating is a simple rating bar for android. It displays animated smileys as rating icon.
Stars: ✭ 1,038 (-1.7%)
Mutual labels: canvas
Image Screenshot
download an image node along with its css properties
Stars: ✭ 40 (-96.21%)
Mutual labels: canvas
Mopaint
🎨💪 Modern, modular paint and more! (pre-alpha, not much done yet)
Stars: ✭ 50 (-95.27%)
Mutual labels: canvas
Vue Mj Daterangepicker
🗓Vue.js date range picker with multiples ranges and presets (vue 2.x)
Stars: ✭ 48 (-95.45%)
Mutual labels: vue2
Nly Adminlte Vue
vuejs2 AdminLte3 template more than 50 components and 10 directives.such as collapse ,sidebar,container,infobox,breadcrumb,card,grid,dropdown,toast,navbar,timeline,icon,progress
Stars: ✭ 44 (-95.83%)
Mutual labels: vue2
Vue Image Loader
Vue progressive image loader plugin like Medium
Stars: ✭ 47 (-95.55%)
Mutual labels: vue2
Vue Express Webpack Gulp
使用Vue,Express,Webpack,gulp搭建的自动化电影库项目
Stars: ✭ 42 (-96.02%)
Mutual labels: vue2
Pure Vue Chart
Simple and lightweight vue chart component without using chart library dependencies
Stars: ✭ 50 (-95.27%)
Mutual labels: vue2
Vue2 Admin Lte
📊 adminLTE to vuejs v2.x converting project
Stars: ✭ 1,023 (-3.12%)
Mutual labels: vue2
Curtainsjs
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.
Stars: ✭ 1,039 (-1.61%)
Mutual labels: canvas
官方文档 & Demo演示
English:If anyone can help translate the document, please contact me
[email protected]
-
在 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/[email protected]/dist/vue-luck-draw.umd.min.js
-
vue3.x: https://cdn.jsdelivr.net/npm/[email protected]/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>
Github 上面帮我点个star
☜(゚ヮ゚☜)
如果您觉得这个项目还不错, 可以在 友情链接
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].