更新时间：2020-11-24 00:18:54
在 vue2.x / vue3.x 中使用
方式 1：通过 import 引入
首先安装插件
1 2 3 4 | # npm 安装：npm install vue-luck-draw# yarn 安装：yarn add vue-luck-draw |
然后找到 main.js 引入插件并 use
1 2 3 4 5 6 | // vue2.ximport LuckDraw from 'vue-luck-draw'Vue.use(LuckDraw)// vue3.ximport LuckDraw from 'vue-luck-draw/vue3'createApp(App).use(LuckDraw).mount('#app') |
最后在组件内使用 <LuckyWheel />大转盘组件 或 <LuckyGrid />九宫格组件
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 标签引入
从下面的链接里下载一个叫luckdraw.umd.min.js的 js 文件, 然后使用 script 标签引入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div id="app"> <!-- 大转盘抽奖 --> <lucky-wheel style="width: 200px; height: 200px" ...你的配置 /> <!-- 九宫格抽奖 --> <lucky-grid style="width: 200px; height: 200px" ...你的配置 /></div><script src="./vue.min.js"></script><script src="./luckdraw.umd.min.js"></script><script> new Vue({ el: '#app' })</script> |
边框 - blocks
为了使得大转盘始终是一个圆，所以这里不支持paddingLeft、paddingRight、paddingTop、paddingBottom等属性
blocks?: Array<object>
1 2 | padding: string 内边距 （边框必须是等宽的, 所以 padding 只能输入一个值）background: string 背景颜色 （可填写16进制颜色哈希值或 rgba） |
关于绘制边框
第一个橘色的 block 的直径等于200px，等于父容器的宽
第二个红色的 block：直径等于180px，因为第一个 block 的padding上下左右同时挤出10px
第三个白色的 block：直径等于160px，因为第二个 block 的padding同样也挤出10px
最后白色 block 挤出的部分就是奖品区域了
web代码
1 2 3 4 5 6 7 8 9 10 11 | <div id="my-lucky" style="width: 200px; height: 200px"></div><script src="../lucky-canvas.umd.min.js"></script><script> let luckyWheel = new LuckyCanvas.LuckyWheel('#my-lucky', { blocks: [ { padding: '10px', background: '#ffc27a' }, { padding: '10px', background: '#ff4a4c' }, { padding: '0px', background: '#fff' } ] })</script> |
vue代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <template> <LuckyWheel style="width: 200px; height: 200px" :blocks="blocks" /></template><script>export default { data () { return { blocks: [ { padding: '10px', background: '#ffc27a' }, { padding: '10px', background: '#ff4a4c' }, { padding: '0px', background: '#fff' } ] } }}</script> |
奖品 - prizes
奖品列表是一个数组，转盘会根据奖品数量来分配扇形区域
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | prizes?: Array<object> 奖品列表background?: string 扇形背景色 （可继承 defaultStyle 背景色，默认为 '#fff'）fonts?: Array<object> 文字列表text: string 字体内容 （可以使用 \n 用来换行）top?: string | number 距离顶部的高度 （格式为：20 | '20px' | '20%'，默认为 0）fontColor?: string 字体颜色 （可继承 defaultStyle 字体颜色，默认为 '#000'）fontSize?: string 字体大小(px) （可继承 defaultStyle 字体大小，默认为 '22px'）fontStyle?: string 字体样式 （可继承 defaultStyle 字体样式，默认为 'sans-serif'）fontWeight?: string 字体粗细 （可继承 defaultStyle 字体粗细，默认为 '400'）lineHeight?: string 字体行高 （默认等于字体大小）wordWrap?: boolean 文字自动换行 （默认为 true 开启，关闭时可以使用 \n 换行）lengthLimit?: string | number 换行宽度限制 （格式为：90 | '90px' | '90%'，默认为 '90%'）imgs?: Array<object> 图片列表src: string 图片路径top?: string | number 距离顶部的高度 （可以写 20px 也可以是 20%，默认为 0）width?: string 图片宽度 （关于图片宽高有四种可能）height?: string 图片高度 （关于图片宽高有四种可能） |
1.宽高都未设置：则使用图片原大小；2.有宽度无高度：则高度随着宽度等比缩放；3.有高度无宽度：则宽度随着高度等比缩放；4.既有宽度也有高度：则图片宽高均等于设置的值（会被拉伸）
关于设置奖品
奖品区域为扇形，会平分整个大转盘并以顺时针方向绘制，建议配置不同的背景色方便区分
文字默认以扇形的中线居中，会自动随着扇形的旋转而旋转
2号扇形的top为100%，所以他的文字超出了原本的区域
web代码
1 2 3 4 5 6 7 8 9 | <div id="my-lucky" style="width: 200px; height: 200px"></div><script src="../lucky-canvas.umd.min.js"></script><script> let luckyWheel = new LuckyCanvas.LuckyWheel('#my-lucky', { blocks: [{ padding: '10px', background: '#d64737' }], prizes: [ { fonts: [{ text: '0' }], background: '#f8d384' }, { fonts: [{ text: '1', top: '20px' }], background: '#f9e3bb' }, { fonts: [{ text: '2', top: '100%' }], background: '#fff' } ], })</script> |
vue代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <template> <LuckyWheel style="width: 200px; height: 200px" :blocks="blocks" :prizes="prizes" /></template><script>export default { data () { return { blocks: [{ padding: '10px', background: '#d64737' }], prizes: [ { fonts: [{ text: '0' }], background: '#f8d384' }, { fonts: [{ text: '1', top: '20px' }], background: '#f9e3bb' }, { fonts: [{ text: '2', top: '100%' }], background: '#fff' } ], } }}</script> |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery幸运大转盘（原创）
- 下一个特效： 基于amazeui实现的后台管理模板