引导页 driver.js

引导页

必然是 driver.js
官网地址 — 只需二十分钟就能全部掌握所有用法 很简答
看官网就全都OK

<template>
    <div>
        <el-button type="primary" @click.prevent.stop="driverObj.drive()"> 打开引导页 🤹‍♂️ </el-button>
    </div>
</template>

<script setup lang="ts">
import { driver } from "driver.js"
import "driver.js/dist/driver.css"

const driverObj = driver({
    showProgress: true,
    progressText: "{{current}} / {{total}}",
    doneBtnText: "完成",
    nextBtnText: "下一步",
    prevBtnText: "上一步",
    steps: [
        { element: '.el-header .toggle', popover: { title: '折叠按钮', description: '这是菜单的折叠按钮', side: "left", align: 'start' } },
        { element: '.el-header .theme-toggle', popover: { title: '设置主题', description: '自定义设置主题', side: "left", align: 'start' } },
        { element: '.el-header .bell', popover: { title: '消息通知', description: '可以接收通知等消息', side: "left", align: 'start' } },
        { element: '.el-header .full-screen', popover: { title: '全屏显示', description: '全屏,退出全屏', side: "left", align: 'start' } },
        { element: '.el-header .avatar', popover: { title: '切换账号', description: '点击可以退出登录，切换账号', side: "left", align: 'start' } },
        { popover: { title: '有志者,事竟成!', description: '祝你好运！' } }
    ]
});
</script>

<style scoped></style>