SpeedDial 九宫格抽奖

介绍

插入九宫格抽奖控件

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

注意

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

组件调用

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

import '@kafan/vue-speed-dial/lib/index.css'

import SpeedDial from '@kafan/vue-speed-dial'

// 全局注册
Vue.use(SpeedDial)
// 使用
<template>
    <v-speeddial class="diyClassName" @rolledStart="start" @rolledEnd="end">
        <!-- <slot>可选插槽插入自定义内容</slot> -->
        <p style="paddingBottom:10px;color:#333">可选插槽插入自定义内容</p>
    </v-speeddial>
</template> 

<script>
export default {
    methods:{
        start(fn){
            fn(2)
        },
        end(){
            alert('isEnd');
        }
    }
}
</script>

props

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

| 参数 | 说明 | 类型 | 默认值 | 备注 | |------|------|------|------|------| | prize-list | 九宫格的奖品列表 | Array | 全部是谢谢参与 | [{prize_name:'奖品名称',icon:'奖品图标'}] | | nums | 抽奖次数 | [Number, String] | 0 | - | | speed | 初始速度值 | [Number, String] | 300 | 速度值越大则越慢 | | max-speed | 转动的最大速度 | [Number, String] | 40 | - | | minturns | 转动的最小圈数 | [Number, String] | 4 | - | | default-bg-pic | 默认宫格背景图 | String | 默认图片 | 请和active图片成套配置，否则不生效 | | active-bg-pic | 宫格活跃背景图 | String | 默认图片 | 请和default图片成套配置，否则不生效 | | btn-bg-pic | 抽奖按钮背景图 | String | 默认图片 | - | | btn-text | 抽奖按钮文案 | String | 抽奖 | - | | remain-text | 剩余次数文案 | String | (剩余N次) | - | | show-remain-num | 是否显示剩余次数 | Boolean | true | - | | item-width | 宫格宽度 | String | 32.2% | - | | item-height | 宫格高度 | String | 32.2% | - | | item-margin-top | 宫格顶部间距 | String | 1.7% | - | | item-margin-right | 宫格右边间距 | String | 1.7% | - | | btn-offset-top | 抽奖按钮顶部偏移 | String | 33.9% | - | | center-distance | 中间按钮底部间距 | String | 35.6% | - |

事件监听

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

| 事件 | 说明 | 备注 | |------|------|------| | rolledStart | 九宫格开始转动 | - | | rolledEnd | 九宫格结束转动 | - |

函数调用

SpeedDial函数会返回自身实例对象，可以赋值给一个变量借以调用该实例的内置函数

import '@kafan/vue-speed-dial/lib/index.css'

import SpeedDial from '@kafan/vue-speed-dial'

const speedObj = SpeedDial({
    nums:3,
    btnText:'test',
    targetContainer:document.querySelectorAll('.line')[1],
    onRolledStart:(fn)=>{
        fn(2)
    },
    onRolledEnd:()=>{
        alert('isEnd');
    },
    slotScoped:()=>{
        return {tag:'p', data:{style: {color: '#333', paddingBottom: '10px'}}, text:'可选插槽插入自定义内容'}
    }
})

内置函数调用，如
speedObj.active();
speedObj.rolledStart(finalIndex);...等等

options

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

| 参数 | 说明 | 类型 | 默认值 | 备注 | |------|------|------|------|------| | prizeList | 九宫格的奖品列表 | Array | 全部是谢谢参与 | [{prize_name:'奖品名称',icon:'奖品图标'}] | | nums | 抽奖次数 | [Number, String] | 0 | - | | speed | 初始速度值 | [Number, String] | 300 | 速度值越大则越慢 | | maxSpeed | 转动的最大速度 | [Number, String] | 40 | - | | minturns | 转动的最小圈数 | [Number, String] | 4 | - | | defaultBgPic | 默认宫格背景图 | String | 默认图片 | 请和active图片成套配置，否则不生效 | | activeBgPic | 宫格活跃背景图 | String | 默认图片 | 请和default图片成套配置，否则不生效 | | btnBgPic | 抽奖按钮背景图 | String | 默认图片 | - | | btnText | 抽奖按钮文案 | String | 抽奖 | - | | remainText | 剩余次数文案 | String | (剩余N次) | - | | showRemainNum | 是否显示剩余次数 | Boolean | true | - | | targetContainer | 插入的容器 | Object | document.body | - | | onRolledStart | 开始抽奖监听函数 | Function | (fn) => {} | fn为开始抽奖函数rolledStart，需传入最终奖品位置如fn(2) | | onRolledEnd | 转动结束回调函数 | Function | () => {} | - | | slotScoped | 插槽函数 | Function | () => {} | [() => VNode] | | itemWidth | 宫格宽度 | String | 32.2% | - | | itemHeight | 宫格高度 | String | 32.2% | - | | itemMarginTop | 宫格顶部间距 | String | 1.7% | - | | itemMarginRight | 宫格右边间距 | String | 1.7% | - | | btnOffsetTop | 抽奖按钮顶部偏移 | String | 33.9% | - | | centerDistance | 中间按钮底部间距 | String | 35.6% | - |