Press Next

# MatchModifyRolePopup Role Selection

Role selection popup component for displaying user's multiple game roles and supporting current role switching for competitions.

# Import

import PressMatchModifyRolePopup from 'press-next/press-match-modify-role-popup/press-match-modify-role-popup';

# Usage

# Basic Usage

<template>
  <div class="demo-wrap">
    <PressButton @click="showRolePopup = true">
      Select Role
    </PressButton>
    <PressMatchModifyRolePopup
      :show="showRolePopup"
      :role-list="roleList"
      :current-account-name="accountName"
      @close="showRolePopup = false"
      @confirm="handleConfirm"
      @role-change="handleRoleChange"
      @switch-account="handleSwitchAccount"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import PressButton from 'press-ui/press-button/press-button.vue';
import PressMatchModifyRolePopup from 'press-next/press-match-modify-role-popup/press-match-modify-role-popup.vue';

const showRolePopup = ref(false);
const accountName = ref('Player Nickname (WeChat)');

const roleList = ref([
  {
    id: '1001',
    name: 'Game Role 1',
    avatar: 'https://example.com/avatar1.jpg',
    tagList: ['iOS', 'VIP User']
  },
  {
    id: '1002', 
    name: 'Game Role 2',
    avatar: 'https://example.com/avatar2.jpg',
    tagList: ['Android', 'New Player']
  }
]);

const handleConfirm = (selectedRole, selectedIndex) => {
  console.log('Confirm role selection:', selectedRole, selectedIndex);
  showRolePopup.value = false;
};

const handleRoleChange = (selectedRole, selectedIndex) => {
  console.log('Role changed:', selectedRole, selectedIndex);
};

const handleSwitchAccount = () => {
  console.log('Switch account');
  // Handle account switching logic here
};
</script>

# Set Default Selected Role

<template>
  <PressMatchModifyRolePopup
    :show="showPopup"
    :role-list="roleList"
    :default-role-index="1"
    @confirm="handleConfirm"
    @close="handleClose"
  />
</template>

# Custom PopupPlus Style

<template>
  <PressMatchModifyRolePopup
    :show="showPopup"
    :role-list="roleList"
    :z-index="200"
    :is-pop-up-round="false"
    @confirm="handleConfirm"
    @close="handleClose"
  />
</template>

# API

# Props

Attribute Description Type Default
show Whether to show popup boolean false
z-index PopupPlus z-index number 100
custom-class Custom class name string ''
button-text Button text string '确定'
title-text Title text string '以下角色均可参赛'
role-list Role list RoleInfo[] []
current-account-name Current account name string ''
is-pop-up-round Whether popup has rounded corners boolean true
default-role-index Default selected role index number 0
tip-text Tip text string '使用以上任意角色参赛，成绩均会算到您的账号：'
current-role-tag-text Current role tag text string '当前'
switch-account-text Switch account button text string '切换账号'
show-switch-account Whether to show switch account button boolean true

# RoleInfo Data Structure

interface RoleInfo {
  id: string;         // Unique role identifier
  name: string;       // Role name
  avatar: string;     // Role avatar URL
  tagList?: string[]; // Role tag list, controlled by business side
}

# Events

Event Description Parameters
close Triggered when popup is closed -
confirm Triggered when confirm clicked (selectedRole: RoleInfo, selectedIndex: number)
role-change Triggered when role is changed (selectedRole: RoleInfo, selectedIndex: number)
switch-account Triggered when switch account clicked -

# Methods

Access component instance via ref to call the following methods:

Method Description Parameters Return
onClose Close popup - -
onSelectRole Select role index: number -
onSwitchAccount Switch account - -

# Reactive Properties

Property Description Type
currentRoleIndex Current selected role index Ref<number>

# Features

# 🎯 Role Switching

  • Click any role item to switch to "current" status
  • Visual feedback with "Current" tag and special styling for selected role
  • Real-time role-change event triggering

# 📱 Responsive Design

  • Auto-monitor role list changes and intelligently reset selection
  • Support external dynamic default role setting
  • Compatible with different screen sizes

# 🔧 Flexible Configuration

  • Support custom popup z-index and styling
  • Configurable rounded corners
  • Support custom account name display
  • Customizable tip text and button text

# 🔄 Account Management

  • Built-in "Switch Account" button for quick account switching
  • Button positioned in top-right corner following user interaction habits
  • Support custom button styling and interaction effects

# Use Cases

  • Role selection during game competition registration
  • Role switching for multi-role accounts
  • Scenarios requiring display of user's multiple game identities

# Style Customization

# CSS Variables

The component provides rich CSS variables for style customization, all using the --mmrp- prefix:

/* Spacing System */
--mmrp-list-margin-bottom: .48rem;     /* List bottom margin */
--mmrp-item-margin-bottom: .24rem;     /* Item bottom margin */
--mmrp-tags-gap: .1rem;                /* Tags gap */
--mmrp-tip-margin-bottom: .34rem;      /* Tip area bottom margin */
--mmrp-body-margin: .2rem 0 .24rem;    /* Body margin */
--mmrp-item-padding: .36rem .4rem;     /* Item padding */
--mmrp-current-tag-padding: .02rem .1rem; /* Current tag padding */
--mmrp-tag-padding: .02rem .1rem;      /* Tag padding */
--mmrp-info-margin-left: .24rem;       /* Info left margin */
--mmrp-name-margin-bottom: .16rem;     /* Name bottom margin */
--mmrp-name-max-width: 4.6rem;         /* Name max width */
--mmrp-content-spacing-lr: .48rem;     /* Content left-right spacing adjustment */

/* Block System */
--mmrp-list-height: 4.84rem;           /* List height */
--mmrp-avatar-width: .92rem;           /* Avatar width */
--mmrp-avatar-height: .92rem;          /* Avatar height */
--mmrp-close-size: .32rem;             /* Close button size */
--mmrp-btn-height: .8rem;              /* Button height */
--mmrp-current-icon-width: .5rem;      /* Current tag width */
--mmrp-current-icon-height: .5rem;     /* Current tag size height */
--mmrp-current-tag-width: .5rem;       /* Current tag width */
--mmrp-current-tag-height: .36rem;     /* Current tag height */
--mmrp-tag-height: .34rem;             /* Tag height */

/* Color System */
--mmrp-overlay-bg: $color-surface-dark; /* Overlay background */
--mmrp-content-bg: $color-surface-default; /* Content background */
--mmrp-item-bg: $color-surface-brand-light; /* Item background color */
--mmrp-tag-background-color: $color-surface-brand-light2; /* Tag background color */
--mmrp-name-text-color: $color-text-secondary; /* Name text color */
--mmrp-tag-text-color: $color-text-brand; /* Tag text color */
--mmrp-account-text-color: $color-text-brand; /* Account text color */
--mmrp-tip-text-color: $color-text-invert-default; /* Tip text color */
--mmrp-current-tag-text-color: $color-surface-brand; /* Current tag text color */
--mmrp-button-text-color: $color-text-invert-light; /* Button text color */

/* Font System */
--mmrp-tip-font-size: $font-size-sm;   /* Tip font size */
--mmrp-name-font-size: $font-size-md;  /* Name font size */
--mmrp-line-height: .36rem;            /* Line height */
--mmrp-name-line-height: .42rem;       /* Name line height */
--mmrp-current-tag-line-height: .36rem; /* Current tag line height */
--mmrp-tag-line-height: .34rem;        /* Tag line height */
--mmrp-current-tag-font-size: .2rem;   /* Current tag font size */
--mmrp-tag-font-size: .2rem;           /* Tag font size */
--mmrp-button-font-size: $font-size-lg; /* Button font size */
--mmrp-font-weight-bold: $font-weight-bold; /* Bold font weight */

/* Border Radius System */
--mmrp-item-border-radius: $border-radius-xs; /* Item border radius */
--mmrp-avatar-border-radius: $border-radius-circle; /* Avatar border radius */
--mmrp-current-tag-border-radius: 0 0 $border-radius-xs 0; /* Current tag border radius */

/* Others */
--mmrp-current-tag-image: url(https://image-1251917893.file.myqcloud.com/general-match-components/img/match-modify-role-popup/current-tag.png); /* Current tag background image */
--mmrp-background-size: 100% 100%;     /* Background image size */
--mmrp-text-align-center: center;      /* Center alignment */

# Theme Customization Examples

/* Dark Theme */
.dark-theme {
  --mmrp-item-bg: rgba(255, 255, 255, 0.1);
  --mmrp-tag-bg: rgba(255, 255, 255, 0.2);
  --mmrp-text-primary: #ffffff;
  --mmrp-text-secondary: #cccccc;
  --mmrp-text-brand: #66b3ff;
}

/* Custom Brand Colors */
.custom-brand {
  --mmrp-text-brand: #ff6b35;
  --mmrp-tag-bg: #fff2ee;
  --mmrp-item-bg: #fef7f4;
}

/* Compact Layout */
.compact-layout {
  --mmrp-spacing-md: .16rem;
  --mmrp-spacing-lg: .24rem;
  --mmrp-item-padding: .24rem .32rem;
  --mmrp-avatar-size: .8rem;
}

# Design System Integration

The component is fully integrated with the design system using semantic variables:

  • Color System: References $color-surface-*, $color-text-* semantic variables
  • Font System: Uses $font-size-*, $font-weight-* standard font variables
  • Spacing System: Follows $spacing-* standard spacing specifications
  • Border Radius System: Adopts $border-radius-* unified border radius standards

# Notes

  1. Component displays normally but with no selectable items when role list is empty
  2. Auto-resets to first role when role list updates cause current index out of range
  3. Confirmation passes current selected role info, not fixed first role
  4. Recommend setting appropriate default images or error handling for role avatars
  5. Style variables support runtime dynamic modification for theme switching functionality

← MatchModifyTeamEmblemDialog →