MatchCreateTeamPopup

A popup component for creating teams, used to collect basic team information. Supports avatar upload, name input, city selection, join review toggle, group chat QR code upload and other functions.

Features

• 📝 Form Management - Complete team creation form including name, avatar, city and other information
• 🖼️ Avatar Upload - Support team avatar upload and preview
• 🌆 City Selection - Support selecting team location
• 🔐 Review Toggle - Set whether team joining requires review
• 📱 QR Code Upload - Support uploading group chat QR code
• 🎨 Theme Customization - Rich CSS variables for theme customization
• 🔧 Flexible Configuration - Support custom button text, default data, etc.

Use Cases

• E-sports team creation
• Team activity grouping
• Online game guild creation
• Sports event team registration

Import

import PressMatchCreateTeamPopup from 'press-next/press-match-create-team-popup/press-match-create-team-popup';

Code Demo

Basic Usage

<template>
  <PressMatchCreateTeamPopup
    :show="showPopup"
    @close="onClose"
    @submit="onSubmit"
    @upload-avatar="handleUploadAvatar"
    @upload-qrcode="handleUploadQrcode"
    @select-city="handleSelectCity"
    @select-requirement="handleSelectRequirement"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchCreateTeamPopup from 'press-next/press-match-create-team-popup/press-match-create-team-popup';

const showPopup = ref(false);

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

const onSubmit = (data: any) => {
  console.log('Submitted form data:', data);
  // Handle submit logic
};

const handleUploadAvatar = () => {
  console.log('Upload avatar');
  // Handle avatar upload logic
};

const handleUploadQrcode = () => {
  console.log('Upload QR code');
  // Handle QR code upload logic
};

const handleSelectCity = () => {
  console.log('Select city');
  // Open city selector
};

const handleSelectRequirement = () => {
  console.log('Select requirement');
  // Open requirement selector
};
</script>

With Default Data

<template>
  <PressMatchCreateTeamPopup
    :show="showPopup"
    :default-data="defaultData"
    @close="onClose"
    @submit="onSubmit"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchCreateTeamPopup from 'press-next/press-match-create-team-popup/press-match-create-team-popup';

const showPopup = ref(false);

const defaultData = {
  teamName: 'King Team',
  avatar: 'https://placehold.co/72x72',
  city: 'Shenzhen, Guangdong',
  noReview: true,
  qrcode: 'https://placehold.co/160x160',
  requirement: 'Rank requirement: Gold and above',
};

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

const onSubmit = (data: any) => {
  console.log('Submitted form data:', data);
};
</script>

Custom Button Text

<template>
  <PressMatchCreateTeamPopup
    :show="showPopup"
    button-text="Confirm Creation"
    @close="onClose"
    @submit="onSubmit"
  />
</template>

Custom Theme

<template>
  <PressMatchCreateTeamPopup
    :show="showPopup"
    custom-class="my-custom-theme"
    @close="onClose"
    @submit="onSubmit"
  />
</template>

<style>
.my-custom-theme {
  /* Avatar styles */
  --ctp-avatar-bg-color: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --ctp-avatar-border-color: #667eea;
  
  /* Text colors */
  --ctp-text-color-primary: #333333;
  --ctp-text-color-secondary: #999999;
  
  /* Upload area */
  --ctp-upload-bg: #f5f5f5;
  --ctp-upload-icon-color: #667eea;
}
</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
button-text	Button text	string	'Create Team and Register'
default-data	Default form data	Partial<FormData>	{}
size	Switch component size	string	'18'
active-color	Switch active color	string	'#366ff4'
inactive-color	Switch inactive color	string	'#fff'

FormData Data Structure

interface FormData {
  teamName: string; // Team name
  avatar: string; // Team avatar URL
  city: string; // City location
  noReview: boolean; // Join without review
  qrcode: string; // Group chat QR code URL
  requirement: string; // Member recruitment requirements
}

Events

Event	Description	Parameters
close	Triggered when closing popup	-
submit	Triggered when clicking submit button	data: FormData
upload-avatar	Triggered when clicking upload avatar	-
upload-qrcode	Triggered when clicking upload QR code	-
select-city	Triggered when clicking select city	-
select-requirement	Triggered when clicking select requirement	-
team-name-change	Triggered when team name changes	name: string
no-review-change	Triggered when review toggle changes	value: boolean

Notes

Usage Recommendations

1. Image Upload: The component does not handle image upload logic itself. You need to implement upload functionality in the upload-avatar and upload-qrcode events
2. City Selection: Open the city selector in the select-city event and update the selected city through default-data
3. Recruitment Requirements: Open the selector in the select-requirement event and update the selected requirement through default-data
4. Form Validation: It is recommended to perform form validation in the submit event, such as team name length, whether avatar is uploaded, etc.
5. Input Limits: Team name is limited to 1-20 characters
6. Image Size: It is recommended that avatar images be square with size 72x72 or larger; QR code images should be 160x160 or larger

Performance Optimization

• Component uses virtual nodes to reduce DOM hierarchy
• Images are recommended to use CDN acceleration
• Compress images before uploading
• Styles use CSS variables for easy dynamic theme switching

Compatibility

• Supports Vue 3.0+
• Compatible with modern browsers (Chrome 60+, Firefox 60+, Safari 12+)
• Supports 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 the ConfigProvider component for usage.

Spacing System

Name	Default	Description
--ctp-upload-size	.8rem	Upload button size
--ctp-option-height	1.12rem	Option height

Box Model System

Name	Default	Description
--ctp-name-input-height	.72rem	Name input height

Color System

Name	Default	Description
--ctp-text-color-secondary	$color-text-invert-default	Secondary text color
--ctp-text-color-primary	$color-text-primary	Primary text color
--ctp-avatar-border-color	$color-divider-light	Avatar border color
--ctp-border-color	$color-border-tertiary	Border color
--ctp-avatar-color	$color-surface-default	Avatar icon color
--ctp-avatar-bg-color	$color-surface-brand	Avatar background color
--ctp-upload-bg	$color-surface-secondary	Upload area background
--ctp-upload-icon-color	$color-border-secondary	Upload icon color
--ctp-upload-border-color	$color-divider-default	Upload border color

Typography System

Name	Default	Description
--ctp-label-font-size	$font-size-lg	Label font size
--ctp-input-font-size	$font-size-md	Input font size
--ctp-arrow-font-size	$font-size-xl	Arrow font size
--ctp-avatar-icon-size	$font-size-sm	Avatar icon size
--ctp-upload-icon-size	$font-size-xl	Upload icon size

Border Radius System

Name	Default	Description
--ctp-avatar-radius	50%	Avatar border radius