更新记录

1.0.0（2025-10-22） 下载此版本

• 初始版本发布
• 支持多步骤流程展示
• 支持高亮区域自动定位
• 支持对话框智能定位（自动避让）
• 支持自定义按钮文本
• 支持蒙版点击关闭配置
• 支持关闭按钮
• 兼容 H5 和微信小程序
• 提供 show、hide 等方法
• 提供 finish、close、step-change 等事件

平台兼容性

uni-app(4.66)

其他

process-guide 流程指引蒙版组件

组件名：process-guide

process-guide 是一个通用的流程指引蒙版组件，用于在用户首次进入某个页面时显示流程指引。支持多步骤流程展示、高亮区域定位、自动记录显示状态，避免重复显示。

功能特性

• ✅ 多步骤流程展示
• ✅ 高亮区域自动定位
• ✅ 对话框智能定位（自动避让）
• ✅ 第一步仅显示【下一步】按钮
• ✅ 中间步骤显示【上一步】和【下一步】按钮
• ✅ 最后一步显示【上一步】和自定义按钮（默认【开始模拟】）
• ✅ 支持关闭按钮（X）
• ✅ 支持蒙版点击关闭（可配置）
• ✅ 响应式设计，支持主题变量
• ✅ 提供显示、隐藏等方法
• ✅ 兼容 H5 和微信小程序

平台兼容性

Props

Events

Methods

使用示例

基础使用

<template>
  <view>
    <!-- 流程指引组件 -->
    <process-guide
      ref="processGuideRef"
      :steps="guideSteps"
      :finalButtonText="'开始模拟'"
      @finish="handleFinish"
      @close="handleClose"
    />

    <!-- 页面内容 -->
    <view class="page-content">
      <view class="step1" id="step1">步骤1区域</view>
      <view class="step2" id="step2">步骤2区域</view>
      <view class="step3" id="step3">步骤3区域</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const processGuideRef = ref(null);

const guideSteps = ref([
  {
    title: '第一步',
    content: '这是第一步的说明内容',
    highlight: '#step1'  // 高亮区域的选择器
  },
  {
    title: '第二步',
    content: '这是第二步的说明内容',
    highlight: '#step2'
  },
  {
    title: '第三步',
    content: '这是第三步的说明内容',
    highlight: '#step3'
  }
]);

const handleFinish = () => {
  console.log('用户完成了流程指引');
  // 执行相关业务逻辑
};

const handleClose = () => {
  console.log('用户关闭了流程指引');
};
</script>

高级使用

<script setup>
// 手动显示指引
const showGuide = () => {
  processGuideRef.value?.show();
};

// 手动隐藏指引
const hideGuide = () => {
  processGuideRef.value?.hide();
};

// 监听步骤变化
const handleStepChange = (step) => {
  console.log(`当前步骤: ${step + 1}`);
};
</script>

<template>
  <process-guide
    ref="processGuideRef"
    :steps="guideSteps"
    :finalButtonText="'开始使用'"
    :maskClosable="true"
    :highlightPadding="15"
    :dialogOffset="30"
    @finish="handleFinish"
    @close="handleClose"
    @step-change="handleStepChange"
  />
</template>

数据结构

steps 数组格式

[
  {
    title: '步骤标题',           // 必需，显示在弹窗顶部
    content: '步骤内容说明',      // 必需，显示在标题下方
    highlight: '#element-id'    // 必需，高亮区域的选择器（支持 id、class 等）
  },
  // ... 更多步骤
]

样式定制

组件支持 CSS 变量定制：

// 使用主题变量
--light-primary: #0098ff  // 按钮颜色

注意事项

1. 高亮选择器: highlight 属性需要指定一个有效的 CSS 选择器，如 #id、.class 等
2. 步骤数据验证: steps 数组中每项必须包含 title、content 和 highlight 属性
3. 自动显示: 组件会在 onMounted 时自动显示，无需手动调用
4. H5 兼容: 组件已针对 H5 平台的导航栏高度进行了适配

常见场景

场景1: 在线多轮竞价页面

const guideSteps = ref([
  { 
    title: '竞价倒计时', 
    content: '请关注此处倒计时，把握竞价时机',
    highlight: '#countdown'
  },
  { 
    title: '出价规则', 
    content: '每次出价必须高于当前价格',
    highlight: '#price-input'
  },
  { 
    title: '出价方式', 
    content: '可选择手动出价或自动出价',
    highlight: '#bid-buttons'
  },
  { 
    title: '成交确认', 
    content: '竞价结束后，最高出价者成交',
    highlight: '#result-area'
  }
]);

场景2: 表单填写指引

const guideSteps = ref([
  { 
    title: '填写基本信息', 
    content: '请先填写您的基本信息',
    highlight: '#basic-info'
  },
  { 
    title: '上传证件', 
    content: '上传身份证正反面照片',
    highlight: '#upload-area'
  },
  { 
    title: '提交审核', 
    content: '确认信息无误后点击提交',
    highlight: '#submit-btn'
  }
]);

更新日志

v1.0.0 (2024-01-01)

• 初始版本发布
• 支持多步骤流程展示
• 支持高亮区域自动定位
• 支持对话框智能定位
• 支持自定义按钮文本
• 兼容 H5 和微信小程序

许可证

MIT License

联系方式

如有问题或建议，欢迎反馈。