用户引导

一个 vue2 插件

#安装
npm install intro-vue2

<!-- 标记 -->
<div data-intro="1"></div>

//插件方式
import introVue2 from 'intro-vue2';

Vue.use(introVue2);


this.$intro({
    options: {
        domAttrFlag: "data-intro", //dom标识 用于寻找对应的step元素
        targetClickEnable: true, //目标区域是否可以点击 默认true（支持在step中配置当前指引）
        clickTargetNext: true, //点击目标区域自动执行下一步 默认true（支持在step中配置当前指引）
        scrollToTarget: true, //滚动到目标区域 默认true 不支持局部滚动
        tipCls: "", //自定义提示框样式
        showBtn: true, //是否显示按钮
        nextLabel: "下一步", //下一步按钮文案
        prevLable: "上一步", //上一步按钮文案
        skipLable: "跳过", //跳过按钮文案 最后一步之前都展示跳过
        exitLable: "退出", //退出按钮文案 退出只会在最后一步展示
        autoNext: true,//是否自动下一步
        autoNextTime: 5,//自动下一步时间（秒）
    },
    steps: [
        {
            step: "1", //
            tip: "点击这里1", //提示文案
            afterEnter(updateTip){
                updateTip('3','更改了第三步的提示')
            },
            //执行下一步之前拦截 必须调用next()才能执行下一步 或者next(step)跳到指定
            beforeNext(next) {
                next("2");
            }
        },
        {
            step: "2",
            tip: "点击这里2",
            afterEnter(updateTip){
                updateTip('3','更改了第三步的提示')
            },
        },
        {
            step: "3",
            tip: "点击这里3",
            targetClickEnable: false
        },
        {
            step: "4",
            tip: "点击这里4",
            clickTargetNext: false
        }
    ]
})

//直接引入
import {intro} from 'intro-vue2';

intro({...})

注意: 要在dom渲染之后调用 mounted nextTich