页面分布引导组件-driver.js

最新推荐文章于 2025-06-03 10:15:31 发布

joe_324

最新推荐文章于 2025-06-03 10:15:31 发布

阅读量378

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/joe_324/article/details/112830723

本文档介绍了如何在Vue项目中使用driver.js创建页面分布引导。首先通过npm安装driver.js，然后在srcmain.js中引入。接着编写分步引导脚本srcutilsteps.js，最后在srcpageseginnerGuide.vue中实现分步引导页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装
npm install driver.js

2.src\main.js引入

import Driver from "driver.js"
import "driver.js/dist/driver.min.css"
Vue.prototype.$driver = new Driver({
 // stageBackground: 'salmon', // 突出显示元素的背景色
 className: "scoped-class", // className to wrap driver.js popover
 animate: true, // Animate while changing highlighted element
 opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
 padding: 10, // Distance of element from around the edges
 allowClose: true, // Whether clicking on overlay should close or not
 overlayClickNext: false, // Should it move to next step on overlay click
 doneBtnText: "完成", // Text on the final button
 closeBtnText: "关闭", // Text on the close button for this step
 nextBtnText: "下一步", // Next button text for this step
 prevBtnText: "上一步" // Previous button text for this step
 // Called when moving to next step on any step
})

3.编写分步引导脚本 src\util\steps.js

export default [
  {
    element: ".el-menu",
    popover: {
      title: "开发组",
      description: "展示当前登录人下的所有开发组",
      position: "right"
    }
  },
  {
    element: ".btnn",
    popover: {
      title: "顶层按钮",
      description: "点击可跳转到项目列表页面，查看按开发组检索的已完成项目和中止项目",
      position: "left"
    }
  },
  {
    element: ".group",
    popover: {
      title: "小组",
      description: "某开发组里的所有小组",
      position: "bottom"
    }
  },
]

4.分步引导页面 src\pages\beginnerGuide.vue

import steps from '../util/steps'
mounted () {
  this.guide()
},
methods: {
  guide() {
    this.$driver.defineSteps(steps)
    this.$driver.start()
  }
}

<el-button size="small" type="primary" @click.stop="guide()">按钮触发</el-button>