vue使用driver.js的解决办法

最新推荐文章于 2024-09-24 10:18:28 发布

summer _q

最新推荐文章于 2024-09-24 10:18:28 发布

阅读量2.2k

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_44237840/article/details/110425034

版权

本文介绍了如何在Vue项目中使用driver.js库创建页面引导功能。driver.js是一个轻量级、高度可定制的库，用于突出显示页面元素并创建用户引导。通过npm或yarn安装，然后在Vue组件中引入并配置所需步骤，即可实现在特定元素上显示提示信息，提供友好的用户体验。

摘要由CSDN通过智能技术生成

driver.js官方网址：（https://kamranahmed.info/driver.js/）
driver.js的特色功能：

1.突出显示页面的任何项目；
2.锁定用户的交互；
3.创建功能介绍；
4.为用户添加聚焦器；
5.高度可定制，可在任何地方使用，可覆盖；
6.界面友好，可通过按键控制；
7.轻量级，gzip压缩后只有约4kb；
8.在所有浏览器上保持一致行为；
9.免费用于个人和商业用途。

安装

第一种：yarn add driver.js
第二种：npm install driver.js
或者在文件重直接引用：

vue项目中进行使用如下：

一、首先进行安装
npm install driver.js
二、接下来在对应的页面进行引入
import “driver.js/dist/driver.min.css”;// 引入css
import Driver from “driver.js”; // 引入库
三、在methods中写入一下方法
showTips() {
const driver = new Driver({
prevBtnText: “上一步”,
nextBtnText: “下一步”,
doneBtnText: “我知道了”,
closeBtnText: “关闭”,
allowClose: false,
stageBackground: ‘transparent’
});
const steps = [