0.1.3 • Published 3 years ago
intro-vue2 v0.1.3
用户引导
一个 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