driver.js+vue

driver.js官网：https://kamranahmed.info/driver.js/

基本选项和一些API方法就不说了，网上都有

直接说怎么在vue项目中使用driver.js

首先要在项目中安装

npm i driver.js

然后在main.js中引用

// driver.js新手引导插件引入
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';

// 一些基本项的配置
Vue.prototype.$driver = new Driver({
    opacity: 0.75, // 背景不透明度
    allowClose: false, // 禁止点击外部关闭
    doneBtnText: '完成', // 完成按钮标题
    closeBtnText: '关闭', // 关闭按钮标题
    stageBackground: '#fff', // 引导对话的背景色
    nextBtnText: '下一步', // 下一步按钮标题
    prevBtnText: '上一步' // 上一步按钮标题
    // animate: false
})

然后创建一个js文件，写具体的步骤内容

export const defineSteps = [
    {
        element: '#step1',
        popover: {
            title: `第一步`,
            description: '内容区\n',
            position: 'bottom-right'
        }
    },
    {
        element: '#step2',
        popover: {
            title: '第二步',
            description: '内容区\n',
            position: 'bottom-right'
        }
    },
    {
        element: '#step3',
        popover: {
            title: '第三步',
            description: '内容区\n',
            position: 'bottom-center'
        }
    }
]

export default defineSteps

当然你也可以在某一步触发事件，如：

{
        element: '#step1',
        popover: {
            title: `第一步`,
            description: '内容区\n',
            position: 'bottom-right'
        },
        onNext: (el)=>{
            console.log(el)
        }
    },

最后在对应的vue组件中使用

<template>
    <div id="step1">测试</div>
</template>

<script>
    //引入defineSteps.js
    import defineSteps from '@/utils/defineSteps.js';

    export default{
        mounted(){
            this.$driver.defineSteps(defineSteps);
            this.$driver.start();
        }
    }
</script>

driver.js样式设置

不能直接写在对应的组件里，至于原因打开控制台看一下元素就知道了

具体样式设置，我是写在了app.vue中

<style>
    [class*="driver-prev-btn"] {
        visibility: hidden;
        /* display: none; */
    }
    [class*="driver-close-btn"] {
        /* visibility: hidden; */
        /* display: none; */
    }
    div#driver-popover-item .driver-popover-footer .driver-close-btn{
        background-color: #fff;
        border: 1px solid #DCDFE6;
        border-radius: 3px;
        text-shadow: none; /* 取消原来的text阴影，不然会有文字重叠的感觉 */
        /* border: none; 取消原来它自己按钮设置的border */
        padding: 7px 15px;
        box-sizing: border-box;
    }
    div#driver-popover-item .driver-popover-footer .driver-next-btn{
        background-color: #00706b;
        border: 1px solid #00706b;
        border-radius: 3px;
        color: #ffffff;
        text-shadow: none; /* 取消原来的text阴影，不然会有文字重叠的感觉 */
        /* border: none; 取消原来它自己按钮设置的border */
        padding: 7px 15px;
        box-sizing: border-box;
    }
<style>