vue-蒙版引導-driver.js

1,driver.js 新用戶引導
https://kamranahmed.info/driver.js/#single-element-no-popover
模型大致如下圖:
在這裏插入圖片描述
2,代碼如下:

import Driver from 'driver.js' // import driver.js
import 'driver.js/dist/driver.min.css' // import driver.js css
import steps from './defineSteps'
   mounted() {
    this.driver = new Driver({
    //此處爲api
      animate: false,
      opacity: 0.70,
      allowClose: false, 
      doneBtnText: '',
      closeBtnText: '',
      nextBtnText: '',
      prevBtnText: '',  
      
  onReset: (Element)=>{
		//這裏寫邏輯回調
      }, 
    });
  setTimeout(() => {
  //添加延時器爲了操作dom
    this.guide();
     },400)
  },
  methods: {
    guide() {
      this.driver.defineSteps(steps)
      this.driver.start()
    },
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章