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

vue-intro-step

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

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

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

安装

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);

局部引用


<template>
  <vue-intro-step
      v-model="show" 
      :config="config"
      @close="closeIntro"
  />
</template>

<script>
import VueIntroStep from 'vue-intro-step'

export default {
  name: 'App',
  components: {
    VueIntroStep
  },
  data () {
    return {
      show: false,
      config: {
        backgroundOpacity: 0.8,
        titleStyle: {
          textAlign: 'center',
          fontSize: '19px',
        },
        contentStyle: {
          textAlign: 'center',
          fontSize: '15px',
        },
        tips: [
          {
            el: '#intro_title',
            tipPosition: 'bottom',
            title: '欢迎使用问答管理系统',
            content: '点击左侧菜单进行操作',
            onNext: () => {
              return new Promise((resolve, reject) => {
                // 延迟2秒 再执行下一步
                setTimeout(() => {
                  resolve(true);
                }, 2000);
              });
            }
          },
          {
            el: '#intro_mine',
            tipPosition: 'left',
            // title: '点击进入个人中心',
            content: '查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码',
            // 点击上一步时，触发的事件
            onPrev: () => {
              return new Promise((resolve) => {
                resolve(true);
              });
            },
            onNext: () => {
              return new Promise((resolve) => {
                // 当页面很长，下一步的内容不在此可视区域内时，可进行下面操作
                document.body.style.overflow = 'auto';
                // 让body滚动到顶部
                window.scrollTo(0,0)
                resolve(true);
              });
            }
          },
          {
            el: '#intro_user',
            tipPosition: 'right',
            title: '点击进入用户管理',
            content: '查看用户信息，添加用户',
            onNext: () => {
              return Promise.resolve(true)
            }
          },
          {
            el: '#intro_save',
            tipPosition: 'top',
            title: '点击进入用户管理',
            content: '查看用户信息，添加用户'
          }
        ]
      }
    }
  },
  methods: {
    closeIntro() {
      // 不需要this.show = false，因为v-model会自动更新
      console.log('关闭');
    },
  }
}
</script>

自定义底部按钮

<template>
  <vue-intro-step v-model="show" :config="config" ref="myIntroStep">
    <!--
      插槽-自定义底部按钮

      tipItem当前的提示信息 index当前提示新的索引

      不写的话，会显示默认的底部按钮
     -->
    <template #prev="{tipItem, index}">
      <button @click="prev(tipItem, index)">上一步</button>
    </template>
    <template #next="{tipItem}">
      <button @click="next(tipItem)">下一步</button>
    </template>
    <template #done>
      <button @click="done">done</button>
    </template>
    <template #skip>
      <button @click="done">skip</button>
    </template>
  </vue-intro-step>
</template>

<script >
export default {
  methods: {
    done(){
      this.show = false;
    },
    next(tipItem){
      // tipItem当前的提示项信息
      // 调用vue-intro-step的next方法 手动触发下一步
      this.$refs.myIntroStep.next()
      console.log(tipItem);
    },
    prev(tipItem, currentIndex){

      // 调用vue-intro-step的prev方法 手动触发上一步
      this.$refs.myIntroStep.prev()
      console.log(tipItem, currentIndex);
    }
  }
}
</script>

组件参数

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 事件参数：关闭步骤引导组件时会触发的事件