intro.js 新用户指引插件初体验

js是一个轻量级的JavaScript库，用于创建逐步和强大的客户入门指南。 【商用收费】

实现效果

官网: introjs.com/docs

使用方法

1. 安装

npm install intro.js --save
yarn add intro.js 
pnpm add intro.js

2. 项目引入

import introJs from 'intro.js'
import '@/assets/style/introjs.css'

onMounted(()=>{
introJs('.topo-card')
  .setOptions({
    prevLabel: '上一步',
    nextLabel: '下一步',
    skipLabel: '跳过',
    doneLabel: '完成',
  })
  .start()
})

const toolList: any = reactive([
  {
    label: '新增元素',
    icon: 'CirclePlus',
    intro: '点击按钮,在出现的列表中拖拽图标到画布以新增元素',
  },
])

 <!-- 右侧工具栏 -->
 <div class="topo-card"></div>
    <el-button
      v-for="item in toolList"
      data-title="工具栏引导操作"
      :data-intro="item.intro"
      :data-step="item.step"
    >{{item.label}}</el-button>
</div>