Press Next

# MatchModifyTeamEmblemDialog

A dialog component for modifying team emblems, allowing users to select a new emblem from a preset list.

# Import

import PressMatchModifyTeamEmblemDialog from 'press-next/press-match-modify-team-emblem-dialog/press-match-modify-team-emblem-dialog';

# Usage

# Basic Usage

<template>
  <PressButton @click="show = true">
    Modify Emblem
  </PressButton>

  <PressMatchModifyTeamEmblemDialog
    :show="show"
    :logo-list="logoList"
    @close="show = false"
    @confirm="handleConfirm"
    @change="handleChange"
  />
</template>

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

const show = ref(false);

const logoList = [
  {
    id: 1,
    url: 'https://example.com/logo1.png',
    name: 'Emblem 1',
    selected: true,
  },
  {
    id: 2,
    url: 'https://example.com/logo2.png',
    name: 'Emblem 2',
    selected: false,
  },
];

const handleConfirm = (logo) => {
  console.log('Confirm emblem selection:', logo);
};

const handleChange = (logo) => {
  console.log('Emblem selection changed:', logo);
};
</script>

# Using Mock Data

<template>
  <PressMatchModifyTeamEmblemDialog
    v-bind="componentProps"
    @close="handleClose"
    @confirm="handleConfirm"
  />
</template>

<script setup>
import { getMockData } from 'press-next/press-match-modify-team-emblem-dialog/demo-data';
import PressMatchModifyTeamEmblemDialog from 'press-next/press-match-modify-team-emblem-dialog/press-match-modify-team-emblem-dialog';

const componentProps = getMockData();

const handleClose = () => {
  console.log('Dialog closed');
};

const handleConfirm = (logo) => {
  console.log('Confirm emblem selection:', logo);
};
</script>

# Custom Button

<template>
  <PressMatchModifyTeamEmblemDialog
    :show="show"
    title="Select New Emblem"
    button-text="Confirm Change"
    :logo-list="logoList"
    custom-class="custom-emblem-dialog"
    @close="show = false"
    @confirm="handleConfirm"
  >
    <template #confirm-btn>
      <PressButton
        block
        type="primary"
        :loading="loading"
        @click="handleCustomConfirm"
      >
        {{ loading ? 'Saving...' : 'Save Emblem' }}
      </PressButton>
    </template>
  </PressMatchModifyTeamEmblemDialog>
</template>

# API

# Props

Attribute Description Type Default
show Whether to show dialog boolean false
title DialogPlus title string '修改队徽'
buttonText Confirm button text string '确定修改'
logoList Emblem list data LogoItem[] []
customClass Custom class name string ''

# LogoItem Data Structure

Property Description Type Required
id Unique identifier for emblem string | number No
url Emblem image URL string Yes
name Emblem name string No
selected Whether selected boolean No

# Events

Event Description Arguments
close Triggered when dialog is closed -
confirm Triggered when confirm button is clicked logo: LogoItem - Selected emblem object
change Triggered when emblem selection changes logo: LogoItem - Currently selected emblem object

# Slots

Name Description SlotProps
confirm-btn Custom confirm button -

# Mock Data API

Function Description
getMockData() Get default mock data

# Theming

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

# Style Variables

Name Default Value Description
--pmted-list-gap-spacing .48rem List gap spacing
--pmted-item-spacing .04rem Item inner padding
--pmted-logo-item-size 1.44rem Emblem item size
--pmted-item-bg-color #fff Emblem item background color
--pmted-item-border-color $color-border-tertiary Emblem item border color
--pmted-bg-color #fff DialogPlus background color
--pmted-item-bg-active-color $color-surface-brand-light Emblem item active background color
--pmted-item-border-active-color $color-border-brand Emblem item active border color
--pmted-item-border-radius 0 Emblem item border radius

# Usage Example

:root {
  --pmted-logo-item-size: 1.2rem;
  --pmted-list-gap-spacing: .32rem;
  --pmted-item-border-color: #e0e0e0;
}

.custom-emblem-dialog {
  --pmted-bg-color: #f8f9fa;
  --pmted-item-bg-color: #ffffff;
}

# Notes

  1. Data Format: Each emblem object in logoList must contain a url field
  2. Selected State: Set initial selected state via selected: true in logoList
  3. Event Return: confirm and change events return the complete LogoItem object
  4. Mini Program Compatibility: Supports WeChat mini program's virtualHost and styleIsolation configuration

# Dependencies

  • PressMatchPopUp: Base dialog component
  • PressButton: Button component

← MatchMpAuthorizePopup →