我开源了一个绝对好用的基于vue2、vue3的系统步骤引导组件。

vue-intro-step

请注意！！！这里是基于vue2版本的组件库

基于vue2的系统步骤引导组件。
更加便捷的操作步骤引导。
vue3版本的步骤引导组件请移步 vue3-intro-step

vue-intro-step 求⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️

vue-intro-step.gif

安装

npm i vue-intro-step --save

[可选] 为了更好的使用 vue-intro-step 使引导组件显示、隐藏不突兀
可以安装 animate.css 实现动画效果

npm i animate.css --save

# 在main.js中引入
import 'animate.css'

全局引用

main.js

import Vue from 'vue'
import VueIntroStep from 'vue-intro-step'

Vue.component('vue-intro-step', VueIntroStep);

局部引用

自定义底部按钮

组件参数

v-model 参数：控制步骤引导组件是否显示

config 参数：配置步骤引导组件的参数

• backgroundOpacity? 参数：步骤引导组件的背景透明度，默认值为0.9，取值范围0-1
• titleStyle? 参数：步骤引导组件的标题样式
  • textAlign? 参数：标题文字的居中样式，默认值为 center，可选值有：left, center, right
  • fontSize? 参数：标题文字的字体大小样式
• contentStyle? 参数：步骤引导组件的内容样式
  • textAlign? 参数：内容文字的居中样式，默认值为 center，可选值有：left, center, right
  • fontSize? 参数：内容文字的字体大小样式
• tips 参数：用于盛放哪些元素需要引导
  • el 参数：元素的选择器，切记目前只支持id选择器
  • tipPosition 参数：引导元素提示信息的位置，可选值有：top, bottom, left, right
  • title? 参数：引导元素提示信息的标题
  • content 参数：引导元素提示信息的内容
  • onNext? 参数：引导元素提示信息点击 下一步 按钮时的回调函数，返回一个promise，如果返回的promise成功，则继续下一步，否则不继续下一步
  • onPrev? 参数：引导元素提示信息点击 上一步 按钮时的回调函数，返回一个promise，如果返回的promise成功，则继续上一步，否则不继续上一步

@close 事件参数：关闭步骤引导组件时会触发的事件