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>
相关推荐
presenttttt3 分钟前
用Python和OpenCV从零搭建一个完整的双目视觉系统(四)
开发语言·python·opencv·计算机视觉
每日出拳老爷子8 分钟前
[C#] 使用TextBox换行失败的原因与解决方案:换用RichTextBox的实战经验
开发语言·c#
半桔12 分钟前
【Linux手册】从接口到管理:Linux文件系统的核心操作指南
android·java·linux·开发语言·面试·系统架构
nightunderblackcat21 分钟前
新手向:实现ATM模拟系统
java·开发语言·spring boot·spring cloud·tomcat·maven·intellij-idea
开开心心就好23 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享24 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
笑衬人心。31 分钟前
Java 17 新特性笔记
java·开发语言·笔记
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
序属秋秋秋1 小时前
《C++初阶之内存管理》【内存分布 + operator new/delete + 定位new】
开发语言·c++·笔记·学习
Savior`L1 小时前
CSS知识复习5
前端·css