【vue3进阶】页面引导库使用

1. 先上使用视频

2. 安装插件

找个效果基于 driver.js 插件，下面展示使用方式：

安装

npm install driver.js

使用

<template>
  <div class="c_box">
    <div class="logo logo1"></div>
    <div class="logo logo2"></div>
  </div>
</template>
<script setup>
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
import { onMounted } from "vue";

const driverObj = driver({
  showProgress: true, // 显示步骤
  allowClose: false, // 是否允许关闭或者点击蒙层关闭
  nextBtnText: '下一步',  // 下一步按钮名称
  prevBtnText: '上一步',  // 上一步按钮名称
  doneBtnText: '完成',  // 完成按钮名称
  steps: [
    { element: '.logo1', popover: { title: '步骤1', description: '步骤1内容', side: "left", align: 'start' }},
    { element: '.logo2', popover: { title: '步骤2', description: '步骤2内容', side: "bottom", align: 'start' }},
    { popover: { title: '结束', description: '结束内容' } }
  ]
});

onMounted(() => {
  driverObj.drive();
})
</script>