4.0.0 • Published 4 years ago

@huteming/ui-guide v4.0.0

Weekly downloads
3
License
ISC
Repository
-
Last release
4 years ago

引导遮层


引入

import { TmGuide } from '@huteming/ui'

// 这是一个构造函数,不是 ui 组件
const guide = new TmGuide([
    {
        name: '1',
        target: '#target1',
        component: component,
        extra: { message: '传递给组件的额外参数' },
        before (done) {},
        after () {},
    },
], {
    init: '1',
    complete () {},
})

guide.open()
guide.close()

component 示例

export default {
    props: {
        extra: Any,
        top: {},
        left: {},
        width: {},
        height: {},
    },

    computed: {
        styles () {
            return {
            }
        },
    },
}

Attributes

参数说明类型可选值默认值
name待渲染组件唯一标识符Any
target目标dom选择器或者Element,位置信息会作为props传入组件String, HTMLElement
component组件选项的对象Object
before渲染前执行函数,等待done执行Function
after渲染后执行函数,在下一个事件循环执行Function
init初始值,对应 name 值。默认为第一个选项Any
complete关闭后执行函数,提前关闭不会执行Function(activeName, isComplete)

Events

name说明
open打开。开始引导
close关闭。如果不是在最后一项时关闭,不会触发 complete 函数