Press Next

# MatchSetAwardPopup

Award image selection popup component for displaying and selecting award icons. Supports uploading new icons, selecting existing icons, custom styling and other features.

# Features

  • πŸ–ΌοΈ Icon Addition - Support clicking button to trigger add award icon, supports custom icon styles and images
  • 🎯 Icon Selection - Support selecting from existing icons
  • 🎨 Custom Styling - Rich CSS variables for theme customization
  • πŸ“ Flexible Positioning - Supports four corner positions for selected mark (top-right, top-left, bottom-right, bottom-left)
  • πŸ”˜ Custom Icons - Supports custom selected mark and add button icon styles
  • 🎭 Slot Support - Supports full customization of selected mark, add button and confirm button
  • πŸ“± Responsive Design - Adapt to different screen sizes
  • ⚑ Lightweight & Efficient - Optimized code structure with excellent performance

# Use Cases

  • E-sports competition award settings
  • Activity reward configuration
  • Game item selection
  • Points mall product management

# Import

import PressMatchSetAwardPopup from 'press-next/press-match-set-award-popup/press-match-set-award-popup';

# Code Demo

# Basic Usage

<template>
  <PressMatchSetAwardPopup
    :show="showPopup"
    :award-list="awardList"
    :selected-id="selectedId"
    @close="onClose"
    @add-click="onAddClick"
    @award-click="onAwardClick"
    @btn-click="onBtnClick"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchSetAwardPopup from 'press-next/press-match-set-award-popup/press-match-set-award-popup';

const showPopup = ref(false);
const selectedId = ref('');
const awardList = ref([
  { id: 1, name: 'Coin', imageUrl: 'https://example.com/coin.png' },
  { id: 2, name: 'Diamond', imageUrl: 'https://example.com/diamond.png' },
  { id: 3, name: 'Chest', imageUrl: 'https://example.com/chest.png' }
]);

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

const onAddClick = () => {
  console.log('Click add button');
  // Can trigger file selector, open gallery, etc.
  // Or navigate to upload page
};

const onAwardClick = (item: any, index: number) => {
  selectedId.value = item.id;
  console.log('Selected award:', item, index);
};

const onBtnClick = (id: string | number) => {
  console.log('Confirm selection:', id);
  showPopup.value = false;
};
</script>

# Custom Title

<template>
  <PressMatchSetAwardPopup
    :show="showPopup"
    title="Select Your Award"
    :award-list="awardList"
    @close="onClose"
  />
</template>

# Custom Selected Mark Position

Component supports four corner positions for selected mark: top-right (default), top-left, bottom-right, bottom-left

<template>
  <div>
    <!-- Top right (default) -->
    <PressMatchSetAwardPopup
      :show="showPopup1"
      :award-list="awardList"
      mark-position="top-right"
      @close="onClose"
    />
    
    <!-- Top left -->
    <PressMatchSetAwardPopup
      :show="showPopup2"
      :award-list="awardList"
      mark-position="top-left"
      @close="onClose"
    />
    
    <!-- Bottom right -->
    <PressMatchSetAwardPopup
      :show="showPopup3"
      :award-list="awardList"
      mark-position="bottom-right"
      @close="onClose"
    />
    
    <!-- Bottom left -->
    <PressMatchSetAwardPopup
      :show="showPopup4"
      :award-list="awardList"
      mark-position="bottom-left"
      @close="onClose"
    />
  </div>
</template>

# Custom Selected Icon

Customize selected mark icon style via check-icon-class or check-icon-url props

<template>
  <!-- Use iconfont icon -->
  <PressMatchSetAwardPopup
    :show="showPopup1"
    :award-list="awardList"
    check-icon-class="pmg-iconfont pmg-icon-check-circle-fill"
    @close="onClose"
  />
  
  <!-- Use image icon -->
  <PressMatchSetAwardPopup
    :show="showPopup2"
    :award-list="awardList"
    check-icon-url="https://example.com/check-icon.png"
    @close="onClose"
  />
</template>

# Custom Add Button Icon

Customize add button icon style via add-icon-class or add-icon-url props

<template>
  <!-- Use iconfont icon -->
  <PressMatchSetAwardPopup
    :show="showPopup1"
    :award-list="awardList"
    add-icon-class="pmg-iconfont pmg-icon-camera"
    @close="onClose"
    @add-click="onAddClick"
  />
  
  <!-- Use image icon -->
  <PressMatchSetAwardPopup
    :show="showPopup2"
    :award-list="awardList"
    add-icon-url="https://example.com/add-icon.png"
    @close="onClose"
    @add-click="onAddClick"
  />
</template>

# Using Slots

<template>
  <PressMatchSetAwardPopup
    :show="showPopup"
    :award-list="awardList"
    @close="onClose"
  >
    <!-- Custom add button -->
    <template #add-button>
      <div class="custom-add-btn" @click="handleAddClick">
        <div class="icon">πŸ“·</div>
        <div class="text">Upload</div>
      </div>
    </template>
    
    <!-- Custom selected mark -->
    <template #selected-mark="{ item, index }">
      <div class="custom-mark">
        <div class="badge">βœ“</div>
        <div class="text">{{ item.name }}</div>
      </div>
    </template>
    
    <!-- Custom confirm button -->
    <template #confirm-btn>
      <button class="custom-confirm-btn" @click="handleConfirm">
        Select Now
      </button>
    </template>
  </PressMatchSetAwardPopup>
</template>

# Custom Button Styles

<template>
  <!-- Plain button -->
  <PressMatchSetAwardPopup
    :show="showPlain"
    :award-list="awardList"
    button-type="primary"
    :button-plain="true"
    @close="() => showPlain = false"
  />
  
  <!-- Large size button -->
  <PressMatchSetAwardPopup
    :show="showLarge"
    :award-list="awardList"
    button-size="large"
    @close="() => showLarge = false"
  />
  
  <!-- Custom style -->
  <PressMatchSetAwardPopup
    :show="showCustom"
    :award-list="awardList"
    btn-text="Select Now"
    :button-style="{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }"
    @close="() => showCustom = false"
  />
</template>

# Custom Theme

<template>
  <PressMatchSetAwardPopup
    custom-class="my-custom-theme"
    :show="showPopup"
    :award-list="awardList"
    @close="onClose"
  />
</template>

<style>
.my-custom-theme {
  --pmsap-body-bg-color: #f5f5f5;
  --pmsap-award-item-border-radius: .16rem;
  --pmsap-confirm-btn-bg-color: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
</style>

# API

# Props

Parameter Description Type Default
custom-class Custom CSS class string ''
show Whether to show popup boolean false
title PopupPlus title string 'Select Award'
award-list Award list AwardItem[] []
selected-id Selected award ID string | number ''
button-type Button type 'primary' | 'default' | 'info' | 'warning' | 'danger' 'primary'
button-plain Whether plain button boolean false
button-size Button size 'normal' | 'large' | 'small' | 'mini' 'large'
button-open-type WeChat open capability string ''
btn-text Confirm button text string 'Confirm'
z-index PopupPlus z-index number 100
button-style Confirm button style object {}
mark-position Selected mark position 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' 'top-right'
check-icon-class Selected icon class name string 'pmg-iconfont pmg-icon-success'
check-icon-url Selected icon image URL string ''
add-icon-class Add button icon class name string 'pmg-iconfont pmg-icon-plus'
add-icon-url Add button image URL string ''

# Type Definitions

// Button type
type ButtonType = 'primary' | 'default' | 'info' | 'warning' | 'danger';

// Button size
type ButtonSize = 'normal' | 'large' | 'small' | 'mini';

// Mark position
type MarkPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';

// Award data structure
interface AwardItem {
  id: string | number; // Award ID
  name?: string; // Award name
  imageUrl: string; // Award image URL
}

# Slots

Name Description Parameters
add-button Custom add button -
selected-mark Custom selected mark { item: AwardItem, index: number }
confirm-btn Custom confirm button -

# Events

Event Description Parameters
close Triggered when popup is closed -
add-click Triggered when add button is clicked -
award-click Triggered when award icon is clicked item: AwardItem, index: number
btn-click Triggered when confirm button clicked selectedId: string \| number

# Notes

# Usage Recommendations

  1. Image Format: PNG or JPG format recommended, square size preferred
  2. Image Size: Single image should not exceed 2MB to ensure loading speed
  3. Selected State: Control selected state via selected-id, must correspond to id in award-list
  4. Add Icon: Component does not include file upload logic, business side needs to listen to add-click event and implement image selection and upload functionality
  5. Icon Management: Recommend maintaining award-list externally, update list data after adding new icons
  6. Mark Position: Choose appropriate mark position based on UI design, default is top-right

# Performance Optimization

  • Images recommended to use CDN acceleration
  • Consider pagination for large number of icons
  • Use image lazy loading to optimize first screen performance

# 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

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

# Style Variables

# Spacing System

Name Default Description
--pmsap-body-padding .2rem .04rem .16rem Body padding
--pmsap-grid-gap .32rem Award grid gap
--pmsap-check-icon-padding .02rem .04rem 0 0 Check icon padding
--pmsap-foot-margin 0 0 1rem 0 Footer margin
--pmsap-confirm-btn-margin 0 Confirm button margin
--pmsap-common-popup-foot-padding-tb 0 PopupPlus footer padding (top-bottom)

# Box Model System

Name Default Description
--pmsap-grid-display grid Grid display
--pmsap-grid-template-columns repeat(4, 1fr) Grid template columns
--pmsap-upload-item-width 1.44rem Upload button width
--pmsap-upload-item-height 1.44rem Upload button height
--pmsap-upload-image-width .8rem Upload button image width
--pmsap-upload-image-height .8rem Upload button image height
--pmsap-award-item-width 1.44rem Award item width
--pmsap-award-item-height 1.44rem Award item height
--pmsap-award-item-overflow hidden Award item overflow
--pmsap-award-image-width .8rem Award image width
--pmsap-award-image-height .8rem Award image height
--pmsap-selected-mark-width .5rem Selected mark width
--pmsap-selected-mark-height .5rem Selected mark height
--pmsap-selected-mark-overflow hidden Selected mark overflow
--pmsap-triangle-width 0 Triangle width
--pmsap-triangle-height 0 Triangle height
--pmsap-check-image-width .24rem Check icon image width
--pmsap-check-image-height .24rem Check icon image height
--pmsap-confirm-btn-width 100% Confirm button width
--pmsap-confirm-btn-height .8rem Confirm button height

# Color System

Name Default Description
--pmsap-body-bg-color $color-surface-default Body background
--pmsap-upload-item-bg-color $color-surface-secondary Upload button background
--pmsap-upload-icon-color $color-border-secondary Upload icon color
--pmsap-award-item-bg-color $color-surface-secondary Award item background
--pmsap-award-item-border-color transparent Award item border color
--pmsap-award-item-selected-border-color $color-border-brand Selected award border color
--pmsap-selected-mark-bg-color $color-surface-brand Selected mark background
--pmsap-triangle-border-left-color transparent Triangle left border color (top-right)
--pmsap-triangle-top-left-border-right-color transparent Triangle right border color (top-left)
--pmsap-triangle-bottom-right-border-left-color transparent Triangle left border color (bottom-right)
--pmsap-triangle-bottom-left-border-right-color transparent Triangle right border color (bottom-left)
--pmsap-check-icon-color $color-text-invert-light Check icon color
--pmsap-confirm-btn-bg-color $color-surface-brand Confirm button background
--pmsap-confirm-btn-text-color $color-text-invert-light Confirm button text color

# Typography System

Name Default Description
--pmsap-upload-icon-font-size .72rem Upload icon font size
--pmsap-check-icon-font-size .24rem Check icon font size
--pmsap-confirm-btn-font-size $font-size-lg Confirm button font size
--pmsap-confirm-btn-font-weight $font-weight-bold Confirm button font weight

# Border Radius System

Name Default Description
--pmsap-upload-item-border-radius 0 Upload button border radius
--pmsap-award-item-border-radius 0 Award item border radius
--pmsap-confirm-btn-border-radius $border-radius-999 Confirm button border radius

# Others

Name Default Description
--pmsap-upload-item-position relative Upload button position
--pmsap-upload-item-border 1px solid $color-divider-default Upload button border
--pmsap-upload-image-object-fit cover Upload button image fit
--pmsap-award-item-position relative Award item position
--pmsap-award-item-border 1px solid $color-divider-default Award item border
--pmsap-award-image-object-fit cover Award image fit
--pmsap-selected-mark-position absolute Selected mark position
--pmsap-check-icon-position relative Check icon position
--pmsap-check-icon-z-index 1 Check icon z-index
--pmsap-check-image-object-fit contain Check icon image fit
--pmsap-triangle-position absolute Triangle position
--pmsap-triangle-content '' Triangle pseudo-element content
Name Default Description
--pmsap-selected-mark-top 0 Selected mark top (top-right)
--pmsap-selected-mark-right 0 Selected mark right (top-right)
--pmsap-mark-top-left-top 0 Selected mark top (top-left)
--pmsap-mark-top-left-left 0 Selected mark left (top-left)
--pmsap-mark-top-left-justify flex-start Top-left mark horizontal align
--pmsap-mark-top-left-align flex-start Top-left mark vertical align
--pmsap-mark-bottom-right-bottom 0 Selected mark bottom (bottom-right)
--pmsap-mark-bottom-right-right 0 Selected mark right (bottom-right)
--pmsap-mark-bottom-right-justify flex-end Bottom-right mark horizontal align
--pmsap-mark-bottom-right-align flex-end Bottom-right mark vertical align
--pmsap-mark-bottom-left-bottom 0 Selected mark bottom (bottom-left)
--pmsap-mark-bottom-left-left 0 Selected mark left (bottom-left)
--pmsap-mark-bottom-left-justify flex-start Bottom-left mark horizontal align
--pmsap-mark-bottom-left-align flex-end Bottom-left mark vertical align
Name Default Description
--pmsap-triangle-top 0 Triangle top (top-right)
--pmsap-triangle-right 0 Triangle right (top-right)
--pmsap-triangle-border-top-width .5rem Triangle top border width (top-right)
--pmsap-triangle-border-top-style solid Triangle top border style (top-right)
--pmsap-triangle-border-left-width .5rem Triangle left border width (top-right)
--pmsap-triangle-border-left-style solid Triangle left border style (top-right)
--pmsap-triangle-top-left-top 0 Triangle top (top-left)
--pmsap-triangle-top-left-left 0 Triangle left (top-left)
--pmsap-triangle-top-left-border-top-width .5rem Triangle top border width (top-left)
--pmsap-triangle-top-left-border-top-style solid Triangle top border style (top-left)
--pmsap-triangle-top-left-border-right-width .5rem Triangle right border width (top-left)
--pmsap-triangle-top-left-border-right-style solid Triangle right border style (top-left)
--pmsap-triangle-bottom-right-bottom 0 Triangle bottom (bottom-right)
--pmsap-triangle-bottom-right-right 0 Triangle right (bottom-right)
--pmsap-triangle-bottom-right-border-bottom-width .5rem Triangle bottom border width (bottom-right)
--pmsap-triangle-bottom-right-border-bottom-style solid Triangle bottom border style (bottom-right)
--pmsap-triangle-bottom-right-border-left-width .5rem Triangle left border width (bottom-right)
--pmsap-triangle-bottom-right-border-left-style solid Triangle left border style (bottom-right)
--pmsap-triangle-bottom-left-bottom 0 Triangle bottom (bottom-left)
--pmsap-triangle-bottom-left-left 0 Triangle left (bottom-left)
--pmsap-triangle-bottom-left-border-bottom-width .5rem Triangle bottom border width (bottom-left)
--pmsap-triangle-bottom-left-border-bottom-style solid Triangle bottom border style (bottom-left)
--pmsap-triangle-bottom-left-border-right-width .5rem Triangle right border width (bottom-left)
--pmsap-triangle-bottom-left-border-right-style solid Triangle right border style (bottom-left)

← MatchShareInvite β†’