TurnTable 转盘组件

介绍

插入转盘组件

组件支持函数调用和组件调用

注意

为了css能够被px2rem识别到并进行rem转换，这里将css提取了出来，请务必记得手动载入样式

组件调用

TurnTable组件可添加props属性后直接插入使用，可自己在组件上添加class或使用className属性自定义类名覆盖样式

import '@kafan/vue-turntable/lib/index.css'

import TurnTable from '@kafan/vue-turntable'

// 全局注册
Vue.use(TurnTable)
// 使用
<template>
    <v-turntable 
        className="test" 
        :lottery-list="lotteryList" 
        @lottery-start="lotteryStart" 
        @lottery-end="lotteryEnd"
        odd-bg-color="#ffd3d3"
        even-bg-color="#fff"
        :duration="1500">
        <template v-slot:goods>
            <span 
                v-for="(item,index) in lotteryList" 
                :key="index" 
                class="testItem" 
                :style="{'width': `${Math.PI * 100 / lotteryList.length}%`,
                'transform':`translateX(-50%) rotate(${(2 * index + 1) * 180 / lotteryList.length}deg)`}"
            >
                {{item.name}}
            </span>
        </template>
    </v-turntable>
</template> 

<script>
export default {
    data(){
        return {
            lotteryList: []
        }
    },
    methods:{
        lotteryStart(fn){
            //do something
        },
        lotteryEnd(reset){
            //do something
        }
    }
}
</script>

props

组件调用时， 支持传入以下 props：

| 参数 | 说明 | 类型 | 默认值 | 备注 | |------|------|------|------|------| | lottery-list | 奖品列表 | Array | [] | [{name:'',icon:''}] | | odd-bg-color | 奇数列背景色 | String | #fff | - | | even-bg-color | 偶数列背景色 | String | #f1deff | - | | third-bg-color | 奇数奖品3倍数列背景色 | String | #dcf8fe | - | | oX | 圆心x轴坐标 | Number | 129 | - | | oY | 圆心y轴坐标 | Number | 129 | - | | radius | 转盘半径 | Number | 129 | - | | className | 自定义类名 | String | - | - | | duration | 转盘动画持续时长 | Number | 2000 | 毫秒(ms) |

事件监听

组件调用时， 会触发以下事件，可供监听回调：

| 事件 | 返回值 | 触发说明 | 备注 | |------|------|------|------| | lottery-start | lottery[is:转动函数] | 点击抽奖按钮时 | lottery参数请传入中奖奖品索引id | | lottery-end | reset[is:重置函数] | 转盘动画结束时 | 可执行动画结束后相关回调 |

插槽使用

本组件有具名插槽goods和btn供使用，即自定义转盘每个奖品项的显示内容以及自定义抽奖按钮

示例

    <template v-slot:goods>
        <p v-for="(item,index) in lotteryList" :key="index">{{item}}</p>
    </template>

    <template v-slot:btn>
        <a class="xxx">按钮文案</a>
    </template>

## 函数调用

```js

import TurnTable from '@kafan/vue-turntable'

TurnTable({
    lotteryList:[{
        name:'xxx',
        icon:'http://xxxx.png'
    },{
        name:'yy',
        icon:'http://yy.png'
    }],
    targetContainer:document.querySelectorAll('.lottery')[0],
    className:'test',
    duration:1000,
    slotScoped:()=>{
        return {
            "btn":{tag:'span', data:{style: {display:'flex','align-items':'center','justify-content':'center',width:'100px',height:'100px',position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-50%)','border-radius':'100%',background:'blue',color:'#fff','font-size':'18px'}}, text:'test'}
        }
    },
    lotteryStart:(fn)=>{
        fn(1)
    },
    lotteryEnd:(reset)=>{
        alert(111);
        reset()
    }
})

//可赋值到Vue原型上供全局使用
Vue.prototype.$TurnTable = TurnTable

options

函数调用时， 支持传入以下 options：

| 参数 | 说明 | 类型 | 默认值 | 备注 | |------|------|------|------|------| | lotteryList | 奖品列表 | Array | [] | [{name:'',icon:''}] | | oddBgColor | 奇数列背景色 | String | #fff | - | | evenBgColor | 偶数列背景色 | String | #f1deff | - | | thirdBgColor | 奇数奖品3倍数列背景色 | String | #dcf8fe | - | | oX | 圆心x轴坐标 | Number | 129 | - | | oY | 圆心y轴坐标 | Number | 129 | - | | radius | 转盘半径 | Number | 129 | - | | className | 自定义类名 | String | - | - | | duration | 转盘动画持续时长 | Number | 2000 | 毫秒(ms) | | targetContainer | 插入的容器 | Object | document.body | - | | lotteryStart | 抽奖开始回调 | Function | (fn) => {} | fn(index)传入中奖奖品索引 | | lotteryEnd | 抽奖结束回调 | Function | (reset) => {} | reset()可重置转盘 | | slotScoped | 插槽函数 | Function | () => {} | [() => Object{"name":VNode}] |