intro-vue-simple v1.0.3

用户引导

一个 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

step