2019-08-07 新手帮助的实现

cnpm install driver.js -s

     import Driver from "driver.js" // 引入插件
    import "driver.js/dist/driver.min.css" // 引入插件
    import steps from "./dd"  //  引入步骤

// 通过绑定元素 类名，id名的形式来 执行步骤，  注意第一个对象要写两次。
const steps = [
    {
        element: "#guide-menu",
        popover: {
            title: "菜单导航",
            description: "点击菜单可切换右侧菜单内容",
            position: "right"
        }
    },
    {
        element: "#guide-menu",
        popover: {
            title: "菜单导航",
            description: "点击菜单可切换右侧菜单内容",
            position: "right"
        }
    },
    {
        element: ".collapse-box",
        popover: {
            title: "汉堡包",
            description: "点击收缩和展开菜单导航",
            position: "bottom"
        },
        padding: 5
    },
    {
        element: "#guide-breadcrumb",
        popover: {
            title: "面包屑导航",
            description: "用于显示 当前导航菜单的位置",
            position: "bottom"
        }
    },
    {
        element: ".user-content",
        popover: {
            title: "个人中心",
            description: "点击可操作",
            position: "left"
        }
    },
    {
        element: "#tagsView",
        popover: {
            title: "最近打开任务",
            description: "最近打开任务菜单，点击可快速切换",
            position: "bottom"
        }
    }
]

export default steps

<template>
    <div>
        <div id="guide-menu">744</div>
        <div class = "collapse-box">744</div>
        <div id="guide-breadcrumb">744</div>
        <div class="user-content">744</div>
        <div id="tagsView">855</div>
        <el-button @click = 'clicks' >帮助索引</el-button>
        <div @click = 'clicks' >   点击我 </div>



    </div>
</template>
<script>
    import Driver from "driver.js" // 引入插件
    import "driver.js/dist/driver.min.css" // 引入插件
    import steps from "./dd"  //  引入步骤


    export default {
        name: "Guide",
        data () {
            return {
                driver: null
            }
        },
        mounted () {
            // this.guide();  //  正常显示
        },
        methods: {
            clicks() {
                // 点击事件不能正常显示
                this.guide();
            },
            guide() {
                console.log('kk');

                this.driver = new Driver({
                    className: "scoped-class", // className to wrap driver.js popover
                    // className: "collapse-box", // 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: true, // 一定要设置为ture 不然点击事件不能触发。
                    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
                });

                // this.driver = new Driver({});  创建对象


                this.driver.defineSteps(steps); // 定义步骤
                this.driver.start();
            }
        }
    }
</script>
<style>
    #guide-menu {
        width: 100px;
        height: 100px;
        background-color: #333;
    }
</style>