th-lucky-plate
一个大转盘逻辑@Vue2.x
Install
# install dependencies
npm install th-lucky-plate --save
Usage
main.js中引入
import NameCustom from 'th-lucky-plate'
Vue.use(NameCustom)
Api
list(Array): slot传入转盘的奖品列表
list: [{awardId: 1, img: ''}]
id: 奖品对应的id 根据list中awardId对比
getPrize(Function): 点击指针触发的自定义方法
例: getPrize () {
// 对应逻辑-弹窗-获取id接口-给id赋值
}
getAward(Function): 回传的奖品列表index值
例: getAward (index) {
console.log(index)
}
rotate(Number): 旋转角度 默认7200
time(Number): 时间 默认 5000
示例
<template>
<div id="app">
<wheel
class="lucky"
:list="list"
:id="id"
:getPrize="getPrize"
@getAward="getAward"
>
<!-- 转盘 -->
<div slot="plate" class="lucky-plate">
<div
:class="['level', `level-${index + 1}`]"
v-for="(item, index) in list"
:key="index"
>
<figure>
<img :src="item.img" />
</figure>
</div>
</div>
<!-- 指针 -->
<div slot="pointer" class="pointer"></div>
</wheel>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
id: 0,
list: [
{
awardId: 1,
img:
'https://img8.kcimg.cn/HW_Image/Turntable/2020/1011/20201011192817-2699.png'
},
{
awardId: 2,
img:
'https://img8.kcimg.cn/HW_Image/Turntable/2020/1011/20201011192805-5779.png'
},
{
awardId: 3,
img:
'https://img8.kcimg.cn/HW_Image/Turntable/2020/1011/20201011192750-8935.png'
},
{
awardId: 4,
img:
'https://img8.kcimg.cn/HW_Image/Turntable/2020/1011/20201011192738-5669.png'
},
{
awardId: 5,
img:
'https://img8.kcimg.cn/HW_Image/Turntable/2020/1011/20201011192725-9317.png'
},
{
awardId: 6,
img:
'https://img8.kcimg.cn/HW_Image/Turntable/2020/1011/20201011192710-9475.png'
},
{
awardId: 7,
img:
'https://img8.kcimg.cn/HW_Image/Turntable/2020/1011/20201011192656-4393.png'
},
{
awardId: 8,
img:
'https://img8.kcimg.cn/HW_Image/Turntable/2020/1011/20201011192120-7118.png'
}
]
}
},
methods: {
getPrize () {
this.id = 2
},
getAward (index) {
console.log(index)
}
}
}
</script>
<style lang="less">
#app {
height: 100%;
width: 100%;
overflow: hidden;
}
.plate {
position: relative;
width: 700px;
height: 700px;
background-image: url(http://s.kcimg.cn/topic/images/2020-autumnSeason/scale_bg.png);
background-size: 100% 100%;
margin: 0px auto;
figure {
max-width: 200px;
margin: 0;
img {
position: relative;
width: 105px;
display: block;
object-fit: contain;
overflow: hidden;
margin: 0px auto;
}
}
.level {
position: absolute;
}
.level-1 {
top: 82px;
left: 50%;
transform: translateX(-50%) rotate(0deg);
}
.level-2 {
top: 147px;
left: 55%;
transform: translateX(30%) rotate(45deg);
}
.level-3 {
top: 295px;
left: 62%;
transform: translateX(64%) rotate(91deg);
}
.level-4 {
top: 447px;
left: 57%;
transform: translateX(22%) rotate(136deg);
}
.level-5 {
top: 508px;
left: 50%;
transform: translateX(-50%) rotate(180deg);
}
.level-6 {
top: 451px;
left: 102px;
transform: translateX(31%) rotate(225deg);
}
.level-7 {
top: 295px;
left: 80px;
transform: translateX(0px) rotate(-90deg);
}
.level-8 {
top: 145px;
left: 13%;
transform: translateX(53%) rotate(-46deg);
}
}
.pointer {
cursor: pointer;
width: 300px;
height: 234px;
position: absolute;
top: -40px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
background: url(http://s.kcimg.cn/topic/images/2020-autumnSeason/gift_center_btn.png)
50% center / 192px 234px no-repeat;
}
</style>
可以进行交流、指导。QQ:546534045(注明 npm、谢谢)