结构
<div id="lucky_wheel"></div>
<link
rel="stylesheet"
href="https://unpkg.com/@truckhome/lucky-plate@version/dist/index.css"
/>
<script src="https://unpkg.com/@truckhome/lucky-plate@version/dist/lucky.js"></script>css
#lucky_wheel {
}
.lucky_wheel-plate {
}
.lucky_wheel-pointer {
}api
- lucky.setLuckyId(id) // 设置中奖号码
- lucky.getLuckyIndex() // 获取中奖是第几个
<head>
<meta charset="utf-8" />
<title>th-lucky-plate</title>
<style>
#lucky_wheel {
margin: 0 auto;
}
img {
width: 150px;
height: 110px;
}
</style>
</head>
<body>
<div id="lucky_wheel"></div>
</body>// cdn地址：
<script src="https://unpkg.com/@truckhome/lucky-plate@version/dist/lucky.js"></script>
<script>
const list = [
'https://img8.kcimg.cn/HW_Image/Turntable/2022/0325/20220325142525-4741.png',
'https://img8.kcimg.cn/HW_Image/Turntable/2022/0325/20220325142513-8117.png',
'https://img8.kcimg.cn/HW_Image/Turntable/2022/0325/20220325142459-1375.png',
'https://img8.kcimg.cn/HW_Image/Turntable/2022/0325/20220325142437-8856.png',
'https://img8.kcimg.cn/HW_Image/Turntable/2022/0325/20220325142427-8191.png',
'https://img8.kcimg.cn/HW_Image/Turntable/2022/0325/20220325142412-2401.png',
'https://img8.kcimg.cn/HW_Image/Turntable/2022/0325/20220325142359-7538.png',
'https://img8.kcimg.cn/HW_Image/Turntable/2022/0325/20220325142459-1375.png'
].map((item, index) => ({ id: index + 1, img: item }))
let num = 1
const lucky = new Lucky.CreateLucky({
container: '#lucky_wheel',
data: list,
options: {
// 开始方法
start: getAsync,
// 自定义传入Plate结构 可不传
createPlate: data => {
const content = data.map((item, index) =>
`<div class="level level-${index + 1}"><figure><img src="${
item.img
}" /></figure></div>`.trim()
)
return content.join('')
},
// 自定义传入pointer 可不传
createPointer: () => {
return `<p class="lucky_pointer"></p>`
},
// 转到奖品回调
callback: () => {
console.log(111)
}
}
})
async function getAsync () {
const id = await getId()
console.log(id)
lucky.setLuckyId(id)
}
async function getId () {
num++
return new Promise(resolve => {
setTimeout(() => {
resolve(num)
}, 2000)
})
}
</script>npm i @truckhome/lucky-plate
import {CreateLucky} from '@truckhome/lucky-plate'
import '@truckhome/lucky-plate/dist/index.css'
如果为找到类型，可以在 tsconfig.json 中 CompilerOptions.paths: {'@truckhome/lucky-plate': ['@truckhome/lucky-palte/index.d.ts']}
let lucky: CreateLucky
onMounted(() => {
// container : document.getElementById('lucky_wheel') || '#lucky_wheel'
lucky = new CreatLucky({
container,
data
})
})#lucky_wheel {
position: relative;
width: 728px;
height: 748px;
}
.lucky_wheel-plate {
position: absolute;
width: 728px;
height: 728px;
top: 20px;
left: 0;
background: url('https://s.kcimg.cn/topic/images/koubei-topic/lucky-plate.png')
no-repeat 50% 50%;
background-size: cover;
.level {
position: absolute;
&.level-1 {
top: 70px;
left: 50%;
transform: translateX(-50%);
}
&.level-2 {
top: 134px;
left: 50%;
margin-left: 48px;
}
&.level-3 {
top: 276px;
left: 50%;
margin-left: 100px;
}
&.level-4 {
top: 426px;
left: 50%;
margin-left: 42px;
}
&.level-5 {
top: 485px;
left: 50%;
transform: translateX(-50%);
}
&.level-6 {
top: 435px;
left: 0;
margin-left: 114px;
}
&.level-7 {
top: 290px;
left: 0;
margin-left: 60px;
}
&.level-8 {
top: 126px;
left: 0;
margin-left: 114px;
}
}
}
.lucky_wheel-pointer {
position: absolute;
width: 238px;
height: 273px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url('https://s.kcimg.cn/topic/images/koubei-topic/pointer.png')
no-repeat 50% 50%;
background-size: cover;
cursor: pointer;
}