MatchPopUp 弹窗组件

# MatchPopUp 弹窗组件

一个基于 PressPopup 封装的通用弹窗组件，支持头部、内容、底部三个区域的自定义内容。

# 引入

import PressMatchPopUp from 'press-next/press-match-pop-up/press-match-pop-up';

# 代码演示

# 基础用法

<template>
  <PressButton @click="show = true">
    打开弹窗
  </PressButton>

  <PressMatchPopUp
    v-model:show="show"
    title="温馨提示"
    @close="handleClose"
  >
    <template #body-content>
      <div>这里是弹窗内容</div>
    </template>
  </PressMatchPopUp>
</template>

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

const show = ref(false);

const handleClose = (reason) => {
  console.log('关闭原因:', reason);
};
</script>

# 完整用法

<template>
  <PressMatchPopUp
    v-model:show="show"
    title="自定义标题"
    :is-round="true"
    :z-index="200"
    custom-class="custom-popup"
    @close="handleClose"
  >
    <!-- 头部右侧插槽 -->
    <template #head-right>
      <PressButton size="small" type="primary">
        操作按钮
      </PressButton>
    </template>

    <!-- 内容区域 -->
    <template #body-content>
      <div class="content">
        <p>这里是弹窗的主要内容区域</p>
        <p>可以放置任意内容</p>
      </div>
    </template>

    <!-- 底部按钮区域 -->
    <template #foot-content>
      <div class="buttons">
        <PressButton block type="primary" @click="confirm">
          确认
        </PressButton>
        <PressButton block @click="cancel">
          取消
        </PressButton>
      </div>
    </template>
  </PressMatchPopUp>
</template>

# 条件渲染

组件会根据插槽内容自动决定是否渲染对应区域：

head-right 插槽有内容时才渲染头部右侧区域
foot-content 插槽有内容时才渲染底部区域
body-content 插槽为必需内容区域

# API

# Props

参数	说明	类型	默认值
show	是否显示弹窗，支持 v-model	boolean	`false`
title	弹窗标题	string	`'温馨提示'`
isRound	是否显示圆角	boolean	`true`
zIndex	弹窗层级	number	`100`
customClass	自定义样式类名	string	`''`

# Events

事件名	说明	回调参数
close	弹窗关闭时触发	`reason?: string` - 关闭原因
update:show	弹窗显示状态变化时触发，支持 v-model	`value: boolean` - 显示状态

# Slots

插槽名	说明	参数
head-right	头部右侧内容，有内容时才渲染	-
body-content	弹窗主体内容	-
foot-content	底部内容，有内容时才渲染	-

# 样式变量

组件提供了以下 CSS 变量用于自定义样式：

# 间距系统

CSS变量	说明	默认值
--pmpopup-foot-padding-tb	底部上下间距	`$spacing-lg`
--pmpopup-foot-padding-lr	底部左右间距	`.76rem`
--pmpopup-close-offset-left	关闭按钮左侧偏移量	`$spacing-lg`
--pmpopup-right-content-offset	右侧内容偏移量	`$spacing-lg`

# 尺寸系统

CSS变量	说明	默认值
--pmpopup-head-height	对话框头部高度	`1.12rem`
--pmpopup-close-size	关闭按钮大小	`.4rem`

# 颜色系统

CSS变量	说明	默认值
--pmpopup-head-bg-color	对话框头部背景色	`none`
--pmpopup-head-text-color	对话框头部文字颜色	`$color-text-primary`
--pmpopup-close-icon-color	关闭按钮图标颜色	`$color-text-primary`
--pmpopup-bg-color	对话框背景色	`#fff`
--pmpopup-foot-bg-color	对话框底部背景色	`none`

# 字体系统

CSS变量	说明	默认值
--pmpopup-head-font-size	对话框头部字体大小	`$font-size-lg`
--pmpopup-head-font-weight	头部字体粗细	`$font-weight-bold`

# 使用示例

/* 自定义弹窗样式 */
:root {
  --pmpopup-head-bg-color: #f5f5f5;
  --pmpopup-head-text-color: #333;
  --pmpopup-close-icon-color: #666;
  --pmpopup-content-spacing: 24px;
}

/* 或者通过 customClass 覆盖 */
.custom-popup {
  --pmpopup-bg-color: #f8f9fa;
  --pmpopup-head-height: 60px;
}

# 注意事项

双向绑定：支持 v-model:show 语法糖
事件传递：关闭时会触发 close 事件并传递关闭原因
条件渲染：头部右侧和底部区域只在有插槽内容时才渲染
小程序兼容：支持微信小程序的 virtualHost 和 styleIsolation 配置

# 依赖组件

PressPopup: 基础弹窗组件

← MatchOperationPopup MatchPrizeList →