步骤引导条插件

无聊写了个简单的步骤引导条组件，支持自定义多种样式，当需要引导的组件不在可视区域时，会自动滚动到指定位置。

使用步骤

1. 下载插件：npm install zyy-driver ，目前最新版本是1.1.4;
2. 在页面中引入 import { driverObj } from 'zyy-driver' import 'zyy-driver/index.css'
3. 配置引导信息：

driverObj.set({
  // boxShadowColor: 'rgba(0,0,0,.5)', // 阴影部分颜色，默认为rgba(0,0,0,0.7)
  steps: [
      { 
        element: '.one',   // 所需引导的dom元素的class或者id
        title: '标题2',    // 引导卡片的标题
        text: '第1步：选择组件',   // 引导卡片的内容
        leftBtn: {          // 左侧按钮配置    
          text: '回去1',  
          style: {
            color: 'red',
            backgroundColor: 'blue'
          }
        },
        rightBtn: {        // 右侧按钮配置    
          text: '过去',
          style: {
            color: 'blue',
            backgroundColor: 'red'
          }
        }
      },
      {element: '.two', title: '第二个', text: '文本安全撒啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊是顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶的杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀啊'},
      {element: '.three', title: '第三个', text: '文本安全啊'},
  ],
  bodyStyle:{           // 高亮部分样式
    padding: '5px',
    borderRadius: '5px',
  },
  cardStyle: {          // 卡片样式
    width: '500px',
    padding: '10px',
    borderRadius: '5px',
    backgroundColor: '#fff',
  }
})

4. 调起该引导 driverObj.start()

完整代码如下：

<template>
  <div class="home">
    <div @click="start">开始步骤条</div>
    <div class="driver">
      <div class="one">第一个</div>
      <div class="two">第二个</div>
      <div class="three">第三个</div>
    </div>
  </div>
</template>

<script setup name="Home" lang="ts">
  import { onMounted, ref } from 'vue'
  import { driverObj } from 'zyy-driver'
  import 'zyy-driver/index.css'
  
  onMounted(()=>{
    driverObj.set({
      // boxShadowColor: 'rgba(0,0,0,.5)',
      steps: [
          { 
            element: '.one', 
            title: '标题2', 
            text: '第1步：选择组件',
            leftBtn: {
              text: '回去1',
              style: {
                color: 'red',
                backgroundColor: 'blue'
              }
            },
            rightBtn: {
              text: '过去',
              style: {
                color: 'blue',
                backgroundColor: 'red'
              }
            }
          },
          {element: '.two', title: '第二个', text: '文本安全撒啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊是顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶的杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀啊'},
          {element: '.three', title: '第三个', text: '文本安全啊'},
      ],
      bodyStyle:{
        padding: '5px',
        borderRadius: '5px',
      },
      cardStyle: {
        width: '500px',
        padding: '10px',
        borderRadius: '5px',
        backgroundColor: '#fff',
      }
    })
  })
 
  function start(){
    driverObj.start()
  }
</script>

<style lang="scss" scoped>
.home{
  .header{
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }
  .driver{
    position: relative;
    padding: 30px;
    div{
      text-align: center;
      line-height: 100px;
      color: #000;
      position: absolute;
      height: 200px;
      width: 200px;
    }
    .one{
      background-color: blue;
    }
    .two{
      top: 100px;
      right: 100px;
      background-color: red;
    }
    .three{
      top: 700px;
      background-color: yellow;
    }
  }
}
</style>