@kafan/vue-turntable v1.0.2

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：

事件监听

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

插槽使用

本组件有具名插槽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：