用户引导

一个 vue2 插件

简单上手

#安装 install
npm install intro-vue2

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

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

Vue.use(introVue2);


this.$intro({
    options: {
        domAttrFlag: "data-intro",
        targetClickEnable: true,
        clickTargetNext: true,
        scrollToTarget: true,
        tipCls: "",
        showBtn: true,
        nextLabel: "下一步",
        prevLable: "上一步",
        skipLable: "跳过",
        exitLable: "完成",
        autoNext: true,
        autoNextTime: 5,
    },
    steps: [
        {
            step: "1",
            tip: "点击这里1",
            afterEnter(updateTip){
                updateTip('2','更改了第二步提示')
            },
            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

API

| 参数 | 说明 | 类型 | 默认值 | | ------- | -------- | ------ | ------ | | options | 配置参数 | Object | {} | | steps | 步骤 | Array | [] |

options

| 参数 | 说明 | 类型 | 默认值 | | ----------------- | ---------------------------- | ------- | ------------ | | domAttrFlag | dom 标记 | String | 'data-intro' | | targetClickEnable | 目标区域是否可以点击 | Boolean | true | | clickTargetNext | 点击目标区域自动执行下一步 | Boolean | true | | scrollToTarget | 滚动到目标区域 | Boolean | true | | tipCls | 自定义提示框样式 | String | '' | | showBtn | 是否显示按钮 | Boolean | true | | nextLabel | 下一步文案 | String | '下一步' | | prevLable | 上一步文案 | String | '上一步' | | skipLable | 跳过文案（最后一步之前展示） | String | '跳过' | | exitLable | 最后一步结束文案 | String | '完成' | | autoNext | 是否自动下一步 | Boolean | true | | autoNextTime | 自动下一步时间（秒） | Number | 5 |

step

| 参数 | 说明 | 类型 | 默认值 | | ----------------- | ----------------------------------------- | -------------- | --------- | | step | 步骤 key | String | undefined | | tip | 提示文案，支持 html 片段 | String | undefined | | targetClickEnable | 目标区域是否可以点击 | Boolean | true | | clickTargetNext | 点击目标区域自动执行下一步 | Boolean | true | | afterEnter | 进入某一步之后回调 | Function | undefined | | beforeNext | 进入下一步之前拦截,调用 next() 执行下一步 | Function(next) | undefined |