今天实现一个后台管理的引导页,所谓的引导页就是当用户第一次或者手动进行触发的时候,提示给用户当前系统的模块介绍,比如哪里是退出,哪里是菜单等等相应的操作
使用的是第三方driver.js的插件功能
yarn add driver.js
<!--
* @use: <LmDriver/>
* @description: 引导页
* @SpecialInstructions: 无
* @Author: clearlove
* @Date: 2022-05-19 22:06:01
* @LastEditTime: 2022-05-19 22:52:49
* @FilePath: /universal-background-template/src/components/LmDriver/index.vue
-->
<template>
<div id="guide" @click.prevent.stop="startGuide" class="el-icon-s-promotion">
引导
</div>
</template>
<script>
import Driver from "driver.js";
import "driver.js/dist/driver.min.css";
import { steps } from "./steps";
let driver;
export default {
name: "LmDriver",
data() {
return {};
},
mounted() {
driver = new Driver({
animate: false, // Whether to animate or not 这里如果是true的话,引导的图标可能会消失 原因待查找
opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
padding: 10, // Distance of element from around the edges
allowClose: true, // Whether the click on overlay should close or not
overlayClickNext: false, // Whether the click on overlay should move next
doneBtnText: "结束", // Text on the final button
closeBtnText: "关闭", // Text on the close button for this step
stageBackground: "#cccccc", // Background color for the staged behind highlighted element
nextBtnText: "下一步", // Next button text for this step
prevBtnText: "上一步", // Previous button text for this step
keyboardControl: true,
onNext: (Element) => {
console.log(Element)
},
});
},
methods: {
startGuide() {
driver.defineSteps(steps);
driver.start();
},
},
};
</script>
<style lang="less" scoped>
#guide {
cursor: pointer;
}
</style>
/*
* @use:
* @description: 引导步骤
* @SpecialInstructions: 无
* @Author: clearlove
* @Date: 2022-05-19 22:12:34
* @LastEditTime: 2022-05-19 22:47:44
* @FilePath: /universal-background-template/src/components/LmDriver/steps.js
*/
import Driver from "driver.js";
let driver = new Driver
export const steps = [
{
element: '#guide', //当前被引导的元素
popover: {
title: '引导开始', // 当前显示的标题
description: '这是引导页', // 描述信息
position: 'left' //出现的位置
}
},
{
element: '#logout', //登出
popover: {
title: '退出',
description: '鼠标移上去可以退出',
position: 'left'
}
},
{
element: '#telescopic', //菜单栏最小化
popover: {
title: '菜单栏最小化',
description: '鼠标点击可以最小化菜单栏',
position: 'right'
},
onNext: () => {
// Prevent moving to the next step
driver.preventMove();
// Perform some action or create the element to move to
// And then move to that element
setTimeout(() => {
driver.moveNext();
}, 2000);
}
},
{
element: '#menu', //菜单
popover: {
title: '菜单',
description: '鼠标点击跳转不同的页面',
position: 'right-center'
}
},
{
element: '#lm-content', //内容区域
popover: {
title: '内容',
description: '内容区域',
position: 'mid-center'
}
}
]
<LmDriver/>
<div id="guide"></div>
上述功能基本上就完成了,需要注意的是,我直接引入了引导页的组件,是因为我本地本身就将所有的组件创建成了全局组件使用,你们在使用的时候还是直接按照vue语法规范进行引入组件,否则可能会出现不生效的bug!