4.0.0 • Published 4 years ago
@huteming/ui-guide v4.0.0
引导遮层
引入
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 函数 |