@huise513/guide

$3

Usage

``sh
npm install @huise513/guide
`

`html


`

`js
import { createGuide } from '@huise513/guide';
import '@huise513/guide/dist/style.css'
const guide = createGuide({
theme: 'default', //主题 default | dark
flag: 'data-guide',
props: { // 所有属性支持在step中配置
targetClickEnable: false, //目标区域是否可以点击
clickTargetNext: false, //点击目标区域自动执行下一步, targetClickEnable需为true
scrollToTarget: true, //滚动到目标区域
showTooltip: true, //是否显示提示框
showOperation: true, //是否显示操作按钮
showSkip: true, //是否显示跳过
showNextBtn: true, //是否显示下一步
showPrevBtn: true, //是否显示上一步
showCompleteBtn: true, //是否完成
nextText: '下一步', //下一步按钮文案
prevText: '上一步', //上一步按钮文案
skipText: '跳过', //跳过按钮文案 最后一步之前都展示
completeText: '完成', //完成按钮文案 只会在最后一步展示
autoNext: false, //是否自动下一步
autoNextTime: 5, //自动下一步等待时间(秒)
position: 'top', //引导展示位置top/bottom/left/right 默认根据位置自动选择
},
events: {
onInit() {
console.log('global onInit');
},
onStart() {
console.log('global onStart');
},
beforeStart(next) {
console.log('global beforeStart');
next();
},
beforeSkip(next) {
console.log('global beforeSkip');
next();
},
beforeComplete(next) {
console.log('global beforeComplete');
next();
},
beforeEnter(next) {
console.log('global beforeEnter');
next();
},
beforeNext(next: Function) {
console.log('global beforeNext');
next();
},
beforePrev(prev: Function) {
console.log('global beforePrev');
prev();
},
afterEnter() {
console.log('global afterEnter');
},
onSkip() {
console.log('global onSkip');
},
onComplete() {
console.log('global onComplete');
},
onExit() {
console.log('global exit');
}
},
steps: [
{
tip: 欢迎你Guide
你好
你好
开始,
beforeNext(next: Function) {
console.log('beforeNext');
next()
},
beforeEnter(next: Function) {
console.log('beforeEnter');
next();
},
afterEnter() {
console.log('afterEnter');
},
},
{
id: 'step1',
tip: '

',
beforePrev(prev: Function) {
console.log('beforePrev'); prev()
},
},
{
id: 'step60',
tip: '提示文案60',
position: 'left',
},
{
id: () => document.querySelector('[data-guide="step90"]'),
tip: '提示文案90',
},
{
id: 'step40',
tip: '提示文案40',
}
],
})
// wait DomTree render complete
guide.start();
``

ps: 完整选项请查看源码