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>
相关推荐
凤山老林几秒前
SpringBoot 如何实现零拷贝:深度解析零拷贝技术
java·linux·开发语言·arm开发·spring boot·后端
泉城老铁6 分钟前
vue实现前端excel的导出
前端·vue.js
黄毛火烧雪下7 分钟前
ruby 、gem 和 cocoapods的联系与区别
开发语言·ruby·cocoapods
用户51681661458418 分钟前
Lottie动画在前端web、vue、react中使用详解
前端·vue.js
盼哥PyAI实验室24 分钟前
Python函数进阶秘籍:闭包、装饰器与作用域全解析(通俗版)
开发语言·python
EndingCoder27 分钟前
Node.js SQL数据库:MySQL/PostgreSQL集成
javascript·数据库·sql·mysql·postgresql·node.js
oceanstonetree35 分钟前
用cosyvoice批量把生成有声书
开发语言·python
咖啡の猫36 分钟前
Vue收集表单数据
前端·javascript·vue.js
半夏知半秋39 分钟前
游戏登录方案中常见的设计模式整理
服务器·开发语言·笔记·学习·游戏·设计模式·lua
知识分享小能手1 小时前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app