vue 引导插件 -- driver.js

一、安装插件

   yarn add driver.js@0.9.8

二、HTML

<template>
  <div class="test-guide">
    <h1>测试driver.js</h1>
    <el-button id="first-ele" type="primary">首页</el-button>
    <el-button id="second-intro" type="warning">帮助</el-button>
    <el-button id="third-des" type="primary">联系我们</el-button>
  </div>
</template>

三、导入插件

    import "driver.js/dist/driver.min.css"; // 引入css
    import Driver from "driver.js"; // 引入库

四、JS

1.单个引导

export default {
    mounted() {
       this.showTips();
    },
    methods: {
        showTips() {
            const driver = new Driver()
            driver.highlight({
                element: "#first-ele",
                stageBackground: "#ffa0a0",
                popover: {
                    title: "温馨提示",
                    description: "这是本站的首页",
                    position: "bottom",
                    className: "first-step",
                },
            });
        },
   },
};

2.多个引导

export default {
    mounted() {
       this.showTips();
    },
    methods: {
        showTips() {
            const driver = new Driver({
                prevBtnText: "上一步",
                nextBtnText: "下一步",
                doneBtnText: "我知道了",
                closeBtnText: "关闭"
            });

            const steps = [
                {
                    element: "#first-ele",
                    popover: {
                        title: "这是本站首页",
                        description: "本站首页是一些展示性的信息",
                        position: "bottom",
                    },
                },
                {
                    element: "#second-intro",
                    popover: {
                        title: "这是帮助",
                        description: "点此处可获取一些本站的相关说明",
                        position: "top",
                    },
                },
                {
                    element: "#third-des",
                    popover: {
                        title: "联系我们",
                        description: "点击这里可获取我们的相关信息",
                        position: "right",
                    },
                },
            ];
            driver.defineSteps(steps);
            driver.start();
         },
    }
};

四、添加判断用户已经访问过该网页就不显示引导

export default {
    mounted() {
        // 设置网页是否第一次访问
        let flag = localStorage.getItem("firstVisit");
        if (!flag) {
          // flag不存在，即当用户第一次访问该网页的时候，调用showTips，显示新手引导
          this.showTips();
        }
    },
    methods: {
        showTips() {
            const driver = new Driver({
                prevBtnText: "上一步",
                nextBtnText: "下一步",
                doneBtnText: "我知道了",
                closeBtnText: "关闭",
                onReset: (ele) => {
                    // 用户关闭了新手引导，此时需设置firstVisit，
                    // 表明该用户已经访问过该网页(不是第一次访问），
                    // 下次在同一台电脑上再打开该网页的时候，
                    // 将不再显示新手引导（用户手动清除缓存的情况除外)
                    localStorage.setItem(
                        "firstVisit",
                        JSON.stringify({ firstVisit: false })
                    );
                },
            });

            const steps = [
                {
                    element: "#first-ele",
                    popover: {
                        title: "这是本站首页",
                        description: "本站首页是一些展示性的信息",
                        position: "bottom",
                    },
                },
                {
                    element: "#second-intro",
                    popover: {
                        title: "这是帮助",
                        description: "点此处可获取一些本站的相关说明",
                        position: "top",
                    },
                },
                {
                    element: "#third-des",
                    popover: {
                        title: "联系我们",
                        description: "点击这里可获取我们的相关信息",
                        position: "right",
                    },
                },
            ];
            driver.defineSteps(steps);
            driver.start();
         },
    }
};

五、设置属性

Driver 选项

const driver = new Driver({ 
    className: 'scoped-class', //包裹driver.js弹窗的类名 
    animate: true, // 高亮元素改变时是否显示动画 
    opacity: 0.75, //背景透明度(0 表示只有弹窗并且没有遮罩)
    padding: 10, // 元素与边缘的距离
    allowClose: true, // 是否允许点击遮罩时关闭
    overlayClickNext: false, //是否允许点击遮罩时移到到下一步
    doneBtnText: 'Done', // 最终按钮上的文本
    closeBtnText: 'Close', // 当前步骤关闭按钮上的文本
    nextBtnText: 'Next', //当前步骤下一步按钮上的文本
    prevBtnText: 'Previous', // 当前步骤上一步按钮上的文本
    showButtons: false, //是否在底部显示控制按钮
    keyboardControl: true, // 是否允许通告键盘控制(escape关闭，箭头键用于移动)
    scrollIntoViewOptions: {}, // `scrollIntoView()` 方法的选项 We use `scrollIntoView()`
    onHighlightStarted: (Element) {}, // 元素开将要高亮时调用
    onHighlighted: (Element) {}, // 元素开完全高亮时调用
    onDeselected: (Element) {}, // 取消选择时调用
    onReset: (Element) {}, // 遮罩将要关闭时调用
    onNext: (Element) => {}, // 任何步骤中移到到下一步时调用
    onPrevious: (Element) => {}, // 任何步骤中移到到上一步时调用
});

step 选项

const stepDefinition = { 
    element: '#some-item', // 需要被高亮的查询选择器字符或Node。 
    popover: { // 如果为空将不会显示弹窗
        'popover-class', // 除了Driver选项中的通用类名称之外，还可以指定包裹当前指定步骤弹窗的类名 
        title: 'Title', // 弹窗的标题 
        description: 'Description', // 弹窗的主体内容 
        showButtons: false, // 是否在底部显示控制按钮
        closeBtnText: 'Close', // 关闭按钮的文本 
        nextBtnText: 'Next', // 当前步骤的下一步按钮文本
        prevBtnText: 'Previous', // 当前步骤的上一步按钮文本 
    } 
};

以上是vue网页使用driver.js插件做引导步骤功能，该内容有借鉴其他jy(Alex_001 )的作品，并不是本人纯写的，本人想做个笔记，请不要建议。