@kafan/vue-speed-dial v1.0.0

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：

事件监听

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

函数调用

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：