vue3中开发引导页的方法

我这里使用的是Driver.js

官方文档地址 Driver.js (driverjs.com)

1.首先安装Driver.js

复制代码

npm install driver.js


pnpm install driver.js


yarn add driver.js

2.完整代码实例

复制代码

<template>
  <div class="content-wrapper">
    <div class="one-wrapper">第一步</div>
    <div class="two-wrapper">第二步</div>
    <div class="three-wrapper">第三步</div>
  </div>
</template>
<script setup>
import {
  reactive,
  ref,
  onMounted,
  onUnmounted,
} from "vue";
import { driver } from "driver.js";// 引入driver.js
import "driver.js/dist/driver.css";// 引入driver.js的样式

let driv = driver();
onMounted(async () => {
  const arr = ref([
    {
      element: ".one-wrapper",// 提示框出现的位置
      popover: {
        className: "first-step-popover-class",// 自定义样式
        title: "这是第一步",//标头文字
        side: "left",//提示框所在位置
        nextBtnText: "下一步",//下一步文字
        prevBtnText: "上一步",//上一步文字
        onNextClick: () => {
          driverObj.moveNext();  // 下一步的回调函数，可以自定义，若不写，则默认为下一步
        },
      },
    },
    {
      element: ".two-wrapper",
      popover: {
        className: "two-step-popover-class",
        title: "这是第二步",
        side: "right",
        nextBtnText: "下一步",
        prevBtnText: "上一步",
        onNextClick: () => {
          driverObj.moveNext();
        },
      },
    },
    {
      element: ".three-wrapper",
      popover: {
        className: "three-step-popover-class",
        title: "这是第三步",
        position: "right",
        nextBtnText: "下一步",
        prevBtnText: "上一步",
        onNextClick: async () => {
          driverObj.moveNext();
        },
      },
    },
  ]);

  const driverObj = driver({
    showButtons: ["next", "previous", "close"],// 是否显示按钮
    showProgress: false, // 是否显示步骤进度
    steps: arr.value, // 步骤列表
    allowClose: true, // 是否点击蒙层进行关闭
  });
  driverObj.drive();
});

onUnmounted(() => {
  driv.destroy();//卸载driver.js
});
</script>
<style lang="less" scoped>
.content-wrapper {
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .one-wrapper,
  .two-wrapper,
  .three-wrapper {
    width: 500px;
    height: 100px;
    background: green;
    text-align: center;
    line-height: 100px;
    margin-bottom: 20px;
  }
  .two-wrapper {
    background: red;
  }
  .three-wrapper {
    background: yellow;
  }
}
</style>