更新记录

1.0.1（2025-04-07） 下载此版本

• ✨ 多步骤引导：支持配置多个引导步骤

平台兼容性

uni-app

uni-app x

xl-guideoverlay 引导遮罩组件

在线演示地址：https://xlandzxg-8gj5901i764f06f7-1308786497.tcloudbaseapp.com/index.html#/ 一个功能强大的引导遮罩组件，用于为用户提供交互式的功能引导。支持多步骤引导、元素高亮、状态保存和样式自定义等特性。

特性

• ✨ 多步骤引导：支持配置多个引导步骤
• 🎯 元素高亮：自动定位并高亮目标元素
• 💾 状态保存：可选择性保存用户的引导完成状态
• 🎨 样式自定义：支持自定义主题和样式
• 📱 响应式布局：自动适应不同屏幕尺寸
• 🔄 状态管理：支持重置和跳过功能

安装

# 如果你使用npm
npm install xl-guideoverlay

# 如果你使用yarn
yarn add xl-guideoverlay

基础用法

<template>
  <xl-guideoverlay
    v-model="showGuide"
    :step="currentStep"
    :steps="guideSteps"
    @finish="onFinish"
  />
</template>

<script>
export default {
  data() {
    return {
      showGuide: false,
      currentStep: 0,
      guideSteps: [
        {
          selector: '#feature-1',
          title: '第一步',
          content: '这是第一步的说明',
          position: 'bottom'
        },
        {
          selector: '#feature-2',
          title: '第二步',
          content: '这是第二步的说明',
          position: 'right'
        }
      ]
    }
  },
  methods: {
    onFinish() {
      console.log('引导完成')
    }
  }
}
</script>

自定义样式

组件支持高度自定义的样式配置，包括高亮框和气泡提示的样式：

<template>
  <xl-guideoverlay
    v-model="showGuide"
    :step="currentStep"
    :steps="guideSteps"
    :highlight-style="highlightStyle"
    :bubble-style="bubbleStyle"
    :bubble-offset="30"
    @finish="onFinish"
  />
</template>

<script>
export default {
  data() {
    return {
      // 自定义高亮框样式
      highlightStyle: {
        borderColor: '#FF6B6B',
        borderWidth: '4px',
        borderStyle: 'solid',
        backgroundColor: 'rgba(255, 107, 107, 0.1)',
        shadowColor: 'rgba(0, 0, 0, 0.7)'
      },
      // 自定义气泡样式
      bubbleStyle: {
        backgroundColor: '#2C3E50',
        textColor: '#ECF0F1',
        titleColor: '#FFFFFF',
        boxShadow: '0 8px 16px rgba(0, 0, 0, 0.2)'
      }
    }
  }
}
</script>

API

Props

highlightStyle 默认值

{
  borderColor: '#6A75FE',
  borderWidth: '3px',
  borderStyle: 'solid',
  backgroundColor: 'rgba(255, 255, 255, 0.1)',
  shadowColor: 'rgba(0, 0, 0, 0.6)'
}

bubbleStyle 默认值

{
  backgroundColor: '#fff',
  textColor: '#666',
  titleColor: '#333',
  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
}

Events

方法

注意事项

1. 确保目标元素的选择器唯一且正确
2. 建议在组件挂载后再显示引导
3. 如果使用了本地存储功能，记得在需要重置引导时调用 resetGuideStatus 方法
4. 气泡位置会自动根据可用空间调整，确保最佳显示效果

示例

查看完整的示例代码：Demo