Press Next

# MatchMustReadPopup

Competition must-read information popup component for displaying registration instructions, participation guidelines and pre-match preparation information. Supports multi-tab switching, QR code display, competition process and other functions.

# Features

  • πŸ“‹ Multi-tab Switching - Support multiple tabs such as registration instructions, how to participate, and pre-match preparation
  • πŸ“ Competition Information - Complete competition information display, including mode, gameplay, time, location, etc.
  • πŸ“ Location Navigation - Support clicking address to jump to map navigation
  • πŸ“± QR Code Display - Support competition QR code and customer service group QR code display
  • 🎨 Theme Customization - Rich CSS variables for theme customization
  • ⚑ Lightweight & Efficient - Optimized code structure with excellent performance

# Use Cases

  • Competition registration instructions display
  • Participation guidelines
  • Pre-match preparation reminder
  • Competition rules description

# Import

import PressMatchMustReadPopup from 'press-next/press-match-must-read-popup/press-match-must-read-popup';

# Code Demo

# Basic Usage

<template>
  <PressMatchMustReadPopup
    :show="showPopup"
    :tabs="tabs"
    :sign-up-info="signUpInfo"
    @close="onClose"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchMustReadPopup from 'press-next/press-match-must-read-popup/press-match-must-read-popup';

const showPopup = ref(false);

const tabs = ['Registration', 'How to Join', 'Preparation', 'Detailed Rules'];

const signUpInfo = {
  mode: '1v1',
  play: 'Classic Mode',
  requireTeamType: 'City Team',
  time: 'July 7, 2024 14:00',
  address: 'Tencent Binhai Building, Nanshan District, Shenzhen',
};

const onClose = () => {
  showPopup.value = false;
};
</script>

# Complete Configuration

<template>
  <PressMatchMustReadPopup
    :show="showPopup"
    :tabs="tabs"
    :sign-up-info="signUpInfo"
    :match-q-r-code="matchQRCode"
    :group-q-r-code="groupQRCode"
    :match-date="matchDate"
    :match-time="matchTime"
    :z-index="1000"
    @close="onClose"
    @jump-to-rule-page="handleJumpToRule"
    @goto-map="handleGotoMap"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchMustReadPopup from 'press-next/press-match-must-read-popup/press-match-must-read-popup';

const showPopup = ref(false);

const tabs = ['Registration', 'How to Join', 'Preparation', 'Detailed Rules'];

const signUpInfo = {
  mode: '1v1',
  play: 'Classic Mode',
  requireTeamType: 'City Team',
  other: 'Account must have 16 characters (including free characters) to participate',
  time: 'July 7, 2024 14:00',
  address: 'Tencent Binhai Building, Nanshan District, Shenzhen',
  process: [
    { process: 'Team Leader Registration', processDesc: 'Minimum 2 people to enter schedule' },
    { process: 'Referee Check-in', processDesc: 'Must have 2 people before 7/7 14:00 to participate' },
    { process: 'Generate Schedule', processDesc: 'Checked-in teams cannot adjust members' },
    { process: 'Match Start', processDesc: 'Enter match room through this page' },
  ],
};

const matchQRCode = 'https://example.com/match-qrcode.png';
const groupQRCode = 'https://example.com/group-qrcode.png';
const matchDate = 'July 7';
const matchTime = '14:00';

const onClose = () => {
  showPopup.value = false;
};

const handleJumpToRule = () => {
  console.log('Jump to detailed rules page');
};

const handleGotoMap = () => {
  console.log('Jump to map');
};
</script>

# Custom Theme

<template>
  <PressMatchMustReadPopup
    :show="showPopup"
    :tabs="tabs"
    :sign-up-info="signUpInfo"
    custom-class="my-custom-theme"
    @close="onClose"
  />
</template>

<style>
.my-custom-theme {
  /* Tab styles */
  --mrp-tab-active-color: #ff6b00;
  --mrp-tab-active-bg-color: rgba(255, 107, 0, 0.1);
  --mrp-tab-active-border-color: #ff6b00;
  
  /* Content styles */
  --mrp-title-color: #333333;
  --mrp-rule-value-color: #666666;
  
  /* Step colors */
  --mrp-guide-step-color: #ff6b00;
  --mrp-guide-step-bg-color: rgba(255, 107, 0, 0.1);
}
</style>

# API

# Props

Parameter Description Type Default
custom-class Custom style class string ''
show Whether to show popup boolean false
z-index PopupPlus z-index number 100
tabs Tab list string[] []
sign-up-info Registration information SignUpInfo {}
match-q-r-code Match QR code image URL string ''
group-q-r-code Customer service group QR code image URL string ''
match-date Match date string ''
match-time Match time string ''

# SignUpInfo Data Structure

interface ProcessItem {
  process: string; // Process name
  processDesc: string; // Process description
}

interface SignUpInfo {
  mode?: string; // Match mode, e.g. "1v1", "5v5"
  play?: string; // Match gameplay, e.g. "Classic Mode", "Ranked"
  requireTeamType?: string; // Team requirement, e.g. "City Team"
  other?: string; // Other requirements
  time?: string; // Match time, e.g. "July 7, 2024 14:00"
  address?: string; // Match location, e.g. "Tencent Binhai Building, Nanshan District, Shenzhen"
  process?: ProcessItem[]; // Match process list
}

# Events

Event Description Parameters
close Triggered when closing popup -
jump-to-rule-page Triggered when clicking "Detailed Rules" tab -
goto-map Triggered when clicking match location -

# Notes

# Usage Recommendations

  1. Tab Configuration: tabs array should be configured as ['Registration', 'How to Join', 'Preparation', 'Detailed Rules'], the last tab will trigger jump event
  2. QR Code Images: QR code images should use high-resolution images, recommended size no less than 200x200
  3. Match Process: process array should be configured with 2-5 process steps, too many will affect display
  4. Address Navigation: Need to implement map navigation logic in goto-map event
  5. Team Requirement Tip: When requireTeamType is set, a tip icon will be displayed, click to view description
  6. Responsive Adaptation: On small screen devices, recommend adjusting size variables like --mrp-content-height

# Performance Optimization

  • Component uses virtual nodes to reduce DOM hierarchy
  • Tab switching uses v-if to control rendering, reducing unnecessary DOM
  • QR code images recommend using lazy loading
  • Styles use CSS variables for easy dynamic theme switching

# Compatibility

  • Support Vue 3.0+
  • Compatible with modern browsers (Chrome 60+, Firefox 60+, Safari 12+)
  • Support WeChat Mini Program, Alipay Mini Program and other platforms

# Theme Customization

# Style Variables

The component provides the following CSS variables for custom styling. Please refer to ConfigProvider component for usage.

# Spacing System

Name Default Description
--mrp-content-height 50vh Content area height
--mrp-tab-height .6rem Tab height
--mrp-tab-border-width .02rem Tab border width
--mrp-title-padding .4rem 0 .24rem Title padding
--mrp-rules-form-padding .4rem Rules form padding
--mrp-rules-form-li-padding .24rem Rules form item padding
--mrp-rule-form-label-width .96rem Rules form label width
--mrp-rule-form-label-margin .32rem Rules form label margin
--mrp-rule-sche-item-padding 0 0 .24rem .3rem Rules schedule item padding
--mrp-rule-step-name-margin .48rem Rules step name margin
--mrp-guide-wrap-padding .32rem Guide content padding
--mrp-guide-text-padding .16rem Guide text padding
--mrp-guide-example-padding .16rem 0 Example padding
--mrp-guide-example-margin .4rem Guide example margin
--mrp-guide-tips-padding .16rem Guide tips padding
--mrp-game-tip-icon-margin .08rem IconPlus left margin

# Color System

Name Default Description
--mrp-tab-color $color-text-secondary Tab color
--mrp-tab-bg-color $color-surface-secondary Tab background
--mrp-tab-border-color $color-border-tertiary Tab border color
--mrp-tab-active-color $color-text-brand Active tab color
--mrp-tab-active-bg-color $color-surface-brand-light Active tab background
--mrp-tab-active-border-color $color-border-brand Active tab border color
--mrp-title-color #212124 Title color
--mrp-rule-form-label-color $color-text-invert-default Rules form label color
--mrp-rules-form-li-border-color $color-divider-light Divider color
--mrp-rule-value-color $color-text-secondary Rules form value color
--mrp-rule-step-name-color $color-text-brand Rules step name color
--mrp-rule-step-content-color $color-text-invert-default Rules step content color
--mrp-rule-sche-line-color $color-text-brand Rules schedule line color
--mrp-game-start-tips-bg-color #000 Game start tip background
--mrp-game-start-text-color #fff Game start tip text color
--mrp-game-tip-icon-color $color-icon-brand Tip icon color
--mrp-guide-step-color $color-text-brand Guide step color
--mrp-guide-step-bg-color $color-surface-brand-light Guide step background
--mrp-guide-text-color $color-text-primary Guide text color
--mrp-guide-tips-color $color-text-invert-default Guide tips color
--mrp-code-bg-color $color-surface-default QR code background
--mrp-guide-example-bg-color $color-divider-light Example background
--mrp-guide-calendar-date-color #000 Calendar date color

# Typography System

Name Default Description
--mrp-tab-font-size $font-size-sm Tab font size
--mrp-tab-line-height .6rem Tab line height
--mrp-tab-font-weight $font-weight-bold Tab font weight
--mrp-title-font-size $font-size-md Title font size
--mrp-title-font-weight $font-weight-bold Title font weight
--mrp-rule-form-label-font-size $spacing-md Rules form label font size
--mrp-rule-form-label-line-height .36rem Rules form label line height
--mrp-rule-value-font-size $spacing-md Rules form value font size
--mrp-rule-step-name-font-size $font-size-sm Rules step name font size
--mrp-game-start-tips-font-size .2rem Game start tip font size
--mrp-game-tip-icon-size $font-size-xs IconPlus size
--mrp-guide-tips-font-size .24rem Guide tips font size
--mrp-guide-step-font-size $font-size-xxs Step font size
--mrp-guide-text-font-size $font-size-sm Guide font size
--mrp-guide-text-font-weight $font-weight-bold Guide font weight

# Border Radius System

Name Default Description
--mrp-guide-example-radius .08rem Example border radius

← MatchOperationPopup β†’