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>
相关推荐
前端开发呀2 分钟前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序
云枫晖6 分钟前
破壁前行:深度解析前端跨域的本质与实战
前端·浏览器
Porunarufu6 分钟前
JAVA·类和对象③封装及包
java·开发语言
文心快码BaiduComate6 分钟前
代码·创想·未来——百度文心快码创意探索Meetup来啦
前端·后端·程序员
小白640210 分钟前
前端梳理体系从常问问题去完善-框架篇(Vue2&Vue3)
前端
云和数据.ChenGuang14 分钟前
vue中构建脚手架
前端·javascript·vue.js
渣哥17 分钟前
面试官最爱刁难:Spring 框架里到底用了多少经典设计模式?
javascript·后端·面试
千与千寻酱20 分钟前
排列与组合在编程中的实现:从数学概念到代码实践
前端·python
朱昆鹏32 分钟前
如何通过sessionKey 登录 Claude
前端·javascript·人工智能
wdfk_prog33 分钟前
klist 迭代器初始化:klist_iter_init_node 与 klist_iter_init
java·前端·javascript