引导页

安装

npm install driver.js -S

封装核心组件

• components/Gurid.vue

<template></template>

<script setup>
// 引入driver逻辑
import { driver } from "driver.js";
// 引入driver样式
import "driver.js/dist/driver.css";
// driver配置对象
const driverObj = driver({
  // 显示步骤进度
  showProgress: false, // 开启了就显示 1of4 之类的
  // 允许其它方式关闭
  allowClose: false,
  doneBtnText: "完成", // 完成按钮标题
  stageBackground: "#fff", // 引导对话的背景色
  nextBtnText: "下一步", // 下一步按钮标题
  prevBtnText: "上一步", // 上一步按钮标题
  keyboardControl: true, // 键盘控制
  steps: [
    {
      element: ".sidebar",
      popover: {
        side: "left",
        className: "popover-class", // 除了Driver选项中的通用类名称之外，还可以指定包裹当前指定步骤弹窗的类名  className to wrap this specific step popover in addition to the general className in Driver options
        title: "左侧路由", // 弹窗的标题 Title on the popover
        description: "第一步", // 弹窗的主体内容 Body of the popover
        showButtons: ["next", "close"], // 是否在底部显示控制按钮 Do not show control buttons in footer
        nextBtnText: "进行", // 当前步骤的下一步按钮文本 Next button text for this step
        prevBtnText: "上一步", // 当前步骤的上一步按钮文本 Previous button text for this step
      },
    },
    {
      element: ".fixed-header",
      popover: { title: "头部功能区", description: "第二步", side: "bottom" },
    },
    {
      element: ".breadcrumb",
      popover: { title: "面包屑导航区", description: "第三步", side: "top" },
    },
    {
      element: ".content",
      popover: { title: "主内容区", description: "最后一步", side: "top" },
    },
  ],
});

// 开始驱动
const init = () => {
  driverObj.drive();
};
defineExpose({
  init,
});
</script>

<style lang="scss" scoped></style>

封装调用组件

• components/GuridAll.vue

<template>
  <div class="yindao">
    <SvgIcon icon="guide" color="black" size="36" @click="gotoyindao"></SvgIcon>
  </div>
  <Gurid ref="yindaoComponent"></Gurid>
</template>

<script setup>
const yindaoComponent = ref(null);
const gotoyindao = () => {
  yindaoComponent.value.init();
};
</script>

<style lang="scss" scoped>
.yindao {
  width: 30px;
  height: 30px;
  img {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
  }
}
</style>

NavContent 调用

<template>
  <div class="navbarContent">
    <div class="sidebaropen">
      <SideBarOpen></SideBarOpen>
    </div>
    <div class="breadcrumb">
      <BreadCrumb></BreadCrumb>
    </div>

    <div class="avatar">
      <Avater></Avater>
    </div>
    <div class="language">
      <I18n color="black"></I18n>
    </div>
    <div class="theme">
      <ThemeColor></ThemeColor>
    </div>
    <div class="fullscreen">
      <Fullscreen></Fullscreen>
    </div>
    <div class="headerSearch">
      <HeaderSearch></HeaderSearch>
    </div>
    <div class="grid">
      <GuridAll></GuridAll>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.navbarContent {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #ccc;
  .sidebaropen {
    float: left;
    margin-top: 15px;
    margin-left: 20px;
    cursor: pointer;
  }

  .breadcrumb {
    float: left;
    margin-left: 10px;
    margin-top: 1px;
  }
  .avatar {
    width: 80px;
    height: 50px;
    float: right;
    margin-right: 20px;
    margin-top: 5px;
  }
  .language {
    float: right;
    margin-top: 15px;
    margin-right: 20px;
    cursor: pointer;
  }
  .theme {
    float: right;
    margin-top: 15px;
    margin-right: 20px;
    cursor: pointer;
  }
  .fullscreen {
    float: right;
    margin-top: 15px;
    margin-right: 20px;
    cursor: pointer;
  }
  .headerSearch {
    float: right;
    margin-top: 15px;
    margin-right: 20px;
    cursor: pointer;
  }
  .grid {
    float: right;
    margin-top: 15px;
    margin-right: 20px;
    cursor: pointer;
  }
}
</style>