美文网首页关于VUE项目实际运用知识点
vue使用driver.js引导页,在vue-element-a

vue使用driver.js引导页,在vue-element-a

作者: 前端蜗牛老师 | 来源:发表于2019-05-09 17:57 被阅读0次

    1.引入依赖
    yarn add driver.js -S
    或者 npm install dirver.js -S

    1. 在utils文件夹下新建一个driver.js用于存提示信息


      image.png
    2. 在src下新建一个global文件夹用于存放全局函数和全局变量


      image.png
    import Driver from 'driver.js'
    import 'driver.js/dist/driver.min.css'
    import Vue from 'vue'
    Vue.prototype.$driver = new Driver()
    exports.install = function(Vue, options) {
      Vue.prototype.text1 = function() {
        alert('执行成功1')
      }
    }
    

    4.在main.js中挂载到vue上


    image.png

    5.使用:在layout文件里使用


    image.png
    image.png
    image.png
     this.$driver.defineSteps(driverItem)
        this.$driver.start()
    

    在mouted函数调后端接口去判断当前用户是否是第一次登录,如果是调引导页函数,否则不调

    相关文章

      网友评论

        本文标题:vue使用driver.js引导页,在vue-element-a

        本文链接:https://www.haomeiwen.com/subject/kodgoqtx.html