Driverjs的改进使用

---

一、前言

某个项目中使用到了driverjs引导组件，在之前交原型网页的时候需求方还是很满意的，后面改进的发现要做的功能用这个引导组件不能满足，而且发现，对比introjs，还是少了不少功能…含泪选的跪着也要用完。

---

二、改进使用

2.1.隐藏“关闭”按钮

由于引导设置为强制引导，用户不可跳过，查了半天的driverjs的文档发现并没有提供隐藏“关闭”、“上一步”、“下一步”的属性（introjs貌似也只提供了隐藏“上一步”、“下一步”按钮的属性）。只能改相应的class了，查到该关闭按钮的class为driver-close-btn，可设置如下class：

[class*="driver-close-btn"] {
    visibility: hidden;
}

设置之后就没有关闭按钮了，使用display: none实测无效，它貌似内部有个自己设置的display样式优先级比自己设置的高，所以无法覆盖。

2.2.隐藏“上一步”按钮

跟上方同理，修改class样式

[class*="driver-prev-btn"] {
    visibility: hidden;
}

2.3.修改样式

由于使用了ant design，发现这些按钮的样式跟antd的按钮样式不太一样，修改一下按钮的class。使用的是antd默认的那个蓝色样式

div#driver-popover-item .driver-popover-footer button {
    background-color: #1890FF;
    color: white;
    text-shadow: none; /* 取消原来的text阴影，不然会有文字重叠的感觉 */
    border: none; /* 取消原来它自己按钮设置的border */
    line-height: 1.8;
    border-radius: 4px;
}

div#driver-popover-item .driver-popover-footer button:hover {
    background-color: #50ABFF;
}

div#driver-popover-item .driver-popover-footer button:active {
    background-color: #1269BA;
}

2.4.根据引导步骤动态控制内容显示

监听onNext方法，根据element可判断进行到哪一步，从而进行一些内容的动态显示

//在新建driver对象的时候设置onNext的回调方法，这样可以得到element对象。
new Driver({
    ...
    onNext: (Element) => {
        //todo
    }
    ...
})

//或者在设置引导步骤数组的相应步骤对象里设置onNext的回调方法
let steps = [
	...
    {
        element: '#serial-console-card',
        popover: {
            title: '顺序存储·认知实验',
            description: '这是一个描述',
            position: 'right',
        },
        onNext: (Element) => {
        	//todo
    	}
    },
    ...
]

2.5 增加完成引导回调事件

啊，这个driver没有想intro一样提供引导完成、引导取消的事件…倒是有个onReset回调，不过完成、取消、调用reset、refresh方法都会触发这个onReset回调。唉只能触发的时候判断一下了。下面的方法只适合屏蔽了关闭按钮时使用。若有关闭按钮，在最后一步点击关闭也会触发。

let driver = new Driver({
     ...
     onReset: (Element) => {
         let steps = driver.getSteps();
         if (steps[steps.length - 1] == Element) {
             console.log('done');
         }
     }
     ...
});