每天学习一个vue插件(24)——drivejs

七秒记忆的鱼
992 阅读2分钟

如果你不改变的话，所有的一切都不会改变

前言

1 介绍

常用配置项 options

options

{
  // 弹窗class
  className: 'base-drive-popover',
  // 是否需要动画
  animate: true,
  // 遮罩层透明度
  opacity: 0.75,
  // 指定元素element的白色边框
  padding: 10,
  // 是否显示按钮
  showButtons: true,
  // 关闭按钮
  closeBtnText: 'Close',
  // 使用defineSteps时
  // 有上一步，下一步
  nextBtnText: 'Next →',
  prevBtnText: 'Previous',
  // 最后一步有完成
  doneBtnText: 'Done',
  // 键盘操作
  keyboardControl: true
}

new Driver(options)

常用属性 attrs

isActivated

// 是否为激活状态
driver.isActivated

常用方法 methods

highlight

// 显示引导页
// 引导元素
/*
options = {
  element,
  popover
}
popover = {
  className,
  title,
  description,
  position: left|right|top|bottom
}
*/

driver.highlight(id | options)

defineSteps

// 一步步引导
/*
[
  {
    element,
    popover
  }
]
*/
driver.defineSteps(steps)

start

// 开始第一步
// 默认第一步
// 可指定步骤 driver.start(2)
driver.start(step = 0)

moveNext

// 下一步
driver.moveNext()

movePrevious

// 上一步
driver.movePrevious()

getHighlightedElement

// 获取高亮元素
const activeElement = driver.getHighlightedElement()

activeElement.hidePopover()
activeElement.showPopover()

常用事件 events

onHighlightStarted

// 高亮时触发
new Driver({
  onHighlighted: Element => {
    console.log('onHighlighted', Element)
  }
})

onDeselected

// 关闭时触发
new Driver({
  onDeselected: Element => {
    console.log('onDeselected', Element)
  }
})

onPrevious

// 点击上一步触发
new Driver({
  onPrevious: Element => {
    console.log('onPrevious', Element)
  }
})

onNext

// 点击下一步触发
new Driver({
  onNext: Element => {
    console.log('onNext', Element)
  }
})

样式

// popover宽度自适应
div#driver-popover-item {
  max-width: initial
}

2 使用

安装

npm install driver.js --save

3.注意

1.元素使用id，this.#refs.btn无效
2.全屏width时，使用left或right，无法显示
3.弹窗最带宽度限制8rem，按钮无法自适应，须重置样式

尾声

你看，天边的那片云朵，是不是和你一样可爱~

晚安 ^_^

参考链接

往期回顾

avatar
文章
阅读
粉丝