下载
npm i intro.js -S
引入
// 如果只是单独一个组件内使用,没必要在全局main.js中引入使用
import introJs from 'intro.js'
import 'intro.js/introjs.css'
使用
可以针对性的根据需要更改样式
.introjs-tooltip-header .introjs-tooltip-title {
font-size: 14px;
color: #599;
line-height: 20px;
}
- 由于introjs是对dom的操作,所以需要再mounted函数中执行
- 可以是父组件的子组件内的dom元素
mounted () {
this.showNewGuide()
}
methods: {
// 新手指引
showNewGuide() {
introJs()
.setOptions({
nextLabel: '下一步', // 下一个按钮文字
prevLabel: '上一步', // 上一个按钮文字
skipLabel: '跳过', // 跳过按钮文字
doneLabel: '完成', // 完成按钮文字
hidePrev: true, // 在第一步中是否隐藏上一个按钮
exitOnOverlayClick: false, // 点击叠加层时是否退出介绍
showStepNumbers: false, // 是否显示步骤编号
disableInteraction: true, // 是否禁用与突出显示的框内的元素的交互,就是禁止点击
showBullets: false, // 是否显示面板指示点
steps: [
{
element: '.element_1',
title: '步骤1',
intro: '我是步骤1, 我显示在下边',
position: 'bottom'
},
{
element: '.element_2',
title: '步骤2',
intro: '我是步骤2, 我显示在右侧',
position: 'right'
},
{
element: '.element_3',
title: '步骤3',
intro: '我是步骤3, 我显示在上边',
position: 'top'
},
{
element: '.element_4 .child_1',
title: '步骤4',
intro: '我是步骤4, 我显示在左侧, 我可以这样写选择器',
position: 'left'
}
]
}).start()
}
}