引导遮层

引入

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 函数 |