下载:
npm install driver.js
另一种连接引用
<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">
做引导作用的插件
<template> <div class="app-container"> <aside> The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on <a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.</a> </aside> <el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide"> Show Guide </el-button> </div> </template> <script> import Driver from 'driver.js' // import driver.js import 'driver.js/dist/driver.min.css' // import driver.js css import steps from './steps' export default { name: 'Guide', data() { return { driver: null } }, mounted() { this.driver = new Driver() }, methods: { guide() { this.driver.defineSteps(steps) this.driver.start() } } } </script>
steps.js
const steps = [ { element: '#hamburger-container', popover: { title: 'Hamburger', description: 'Open && Close sidebar显示的东西展示页面的内容显示页', position: 'bottom' } }, { element: '#breadcrumb-container', popover: { title: 'Breadcrumb', description: 'Indicate the current page location', position: 'bottom' } }, { element: '#header-search', popover: { title: 'Page Search', description: 'Page search, quick navigation', position: 'left' } }, { element: '#screenfull', popover: { title: 'Screenfull', description: 'Set the page into fullscreen', position: 'left' } }, { element: '#size-select', popover: { title: 'Switch Size', description: 'Switch the system size', position: 'left' } }, { element: '#tags-view-container', popover: { title: 'Tags view', description: 'The history of the page you visited', position: 'bottom' }, padding: 0 } ] export default steps
一些配置
new Driver({ allowClose: false, //禁止点击外部关闭 doneBtnText: '完成', // 完成按钮标题 closeBtnText: '关闭', // 关闭按钮标题 stageBackground: '#fff', // 引导对话的背景色 nextBtnText: '下一步', // 下一步按钮标题 prevBtnText: '上一步', // 上一步按钮标题 })
export default [
{
element: '#demo1',
popover: {
title: '演示标题1',
description: '这是详细描述
',
position: 'bottom-center'
}
}
]
其他人写的使用说明;
https://blog.csdn.net/lavendersue/article/details/105838344