Press Next

# MatchPopUp

A universal popup component based on PressPopup, supporting customizable content in header, body, and footer areas.

# Import

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

# Usage

# Basic Usage

<template>
  <PressButton @click="show = true">
    Open Popup
  </PressButton>

  <PressMatchPopUp
    v-model:show="show"
    title="Notice"
    @close="handleClose"
  >
    <template #body-content>
      <div>Popup content goes here</div>
    </template>
  </PressMatchPopUp>
</template>

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

const show = ref(false);

const handleClose = (reason) => {
  console.log('Close reason:', reason);
};
</script>

# Advanced Usage

<template>
  <PressMatchPopUp
    v-model:show="show"
    title="Custom Title"
    :is-round="true"
    :z-index="200"
    custom-class="custom-popup"
    @close="handleClose"
  >
    <!-- Header right slot -->
    <template #head-right>
      <PressButton size="small" type="primary">
        Action
      </PressButton>
    </template>

    <!-- Body content -->
    <template #body-content>
      <div class="content">
        <p>This is the main content area</p>
        <p>You can put any content here</p>
      </div>
    </template>

    <!-- Footer buttons -->
    <template #foot-content>
      <div class="buttons">
        <PressButton block type="primary" @click="confirm">
          Confirm
        </PressButton>
        <PressButton block @click="cancel">
          Cancel
        </PressButton>
      </div>
    </template>
  </PressMatchPopUp>
</template>

# Conditional Rendering

The component automatically decides whether to render corresponding areas based on slot content:

  • head-right area is rendered only when the slot has content
  • foot-content area is rendered only when the slot has content
  • body-content slot is the required content area

# API

# Props

Attribute Description Type Default
show Whether to show popup, supports v-model boolean false
title PopupPlus title string '温馨提示'
isRound Whether to show rounded corners boolean true
zIndex PopupPlus z-index number 100
customClass Custom class name string ''

# Events

Event Description Arguments
close Triggered when popup is closed reason?: string - Close reason
update:show Triggered when popup visibility changes, supports v-model value: boolean - Visibility state

# Slots

Name Description SlotProps
head-right Header right content, rendered only when has content -
body-content PopupPlus main content -
foot-content Footer content, rendered only when has content -

# CSS Variables

The component provides the following CSS variables for customization:

# Spacing System

CSS Variable Description Default Value
--pmpopup-foot-padding-tb Footer top/bottom padding $spacing-lg
--pmpopup-foot-padding-lr Footer left/right padding .76rem
--pmpopup-close-offset-left Close button left offset $spacing-lg
--pmpopup-right-content-offset Right content offset $spacing-lg

# Size System

CSS Variable Description Default Value
--pmpopup-head-height DialogPlus header height 1.12rem
--pmpopup-close-size Close button size .4rem

# Color System

CSS Variable Description Default Value
--pmpopup-head-bg-color DialogPlus header background color none
--pmpopup-head-text-color DialogPlus header text color $color-text-primary
--pmpopup-close-icon-color Close button icon color $color-text-primary
--pmpopup-bg-color DialogPlus background color #fff
--pmpopup-foot-bg-color DialogPlus footer background color none

# Font System

CSS Variable Description Default Value
--pmpopup-head-font-size DialogPlus header font size $font-size-lg
--pmpopup-head-font-weight Header font weight $font-weight-bold

# Usage Example

/* Custom popup styles */
:root {
  --pmpopup-head-bg-color: #f5f5f5;
  --pmpopup-head-text-color: #333;
  --pmpopup-close-icon-color: #666;
  --pmpopup-content-spacing: 24px;
}

/* Or override through customClass */
.custom-popup {
  --pmpopup-bg-color: #f8f9fa;
  --pmpopup-head-height: 60px;
}

# Notes

  1. Two-way Binding: Supports v-model:show syntax sugar
  2. Event Passing: Triggers close event with close reason when closing
  3. Conditional Rendering: Header right and footer areas are rendered only when slots have content
  4. Mini Program Compatibility: Supports WeChat mini program's virtualHost and styleIsolation configuration

# Dependencies

  • PressPopup: Base popup component

← MatchPrizeList →