| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- <script setup lang="ts">
- // const myLucky = ref<any>(null)
- // const prizes = [
- // { background: '#e9e8fe', fonts: [{ text: '0' }] },
- // { background: '#b8c5f2', fonts: [{ text: '1' }] },
- // { background: '#e9e8fe', fonts: [{ text: '2' }] },
- // { background: '#b8c5f2', fonts: [{ text: '3' }] },
- // ]
- // const blocks = [{ padding: '10px', background: '#869cfa' }]
- // const defaultConfig = ref<any>([{
- // gutter: '5px',
- // offsetDegree: 10,
- // }])
- // const buttons = [
- // { radius: '40%', background: '#617df2' },
- // { radius: '35%', background: '#afc8ff' },
- // {
- // radius: '30%',
- // background: '#869cfa',
- // pointer: true,
- // fonts: [{ text: '开始', top: '-10px' }],
- // },
- // ]
- // // 点击抽奖按钮会触发star回调
- // function startCallback() {
- // console.log(myLucky?.value)
- // // 调用抽奖组件的play方法开始游戏
- // myLucky?.value?.play()
- // // 模拟调用接口异步抽奖
- // setTimeout(() => {
- // // 假设后端返回的中奖索引是0
- // const index = 1
- // // 调用stop停止旋转并传递中奖索引
- // defaultConfig.value = [{
- // gutter: '5px',
- // offsetDegree: 90,
- // }]
- // myLucky?.value?.stop(index)
- // }, 3000)
- // console.log(myLucky?.value?.stop, 'myLucky?.value?.stop')
- // }
- // // 抽奖结束会触发end回调
- // function endCallback(prize: any) {
- // console.log(prize)
- // }
- </script>
- <template>
- <div>
- <!-- <LuckyWheel -->
- <!-- ref="myLucky" -->
- <!-- width="300px" -->
- <!-- height="300px" -->
- <!-- :prizes="prizes" -->
- <!-- :blocks="blocks" -->
- <!-- :buttons="buttons" -->
- <!-- @start="startCallback" -->
- <!-- @end="endCallback" -->
- <!-- :default-config="defaultConfig[0]" -->
- <!-- /> -->
- </div>
- </template>
- <style scoped lang="scss"></style>
|
