Press Next

# MatchResultDialog

Match result dialog component for displaying match result information, including result title, match cover, trophy, tip text and action buttons. Built on PressPopup and PressMatchResultItem.

# Import

import PressMatchResultDialog from 'press-next/press-match-result-dialog/press-match-result-dialog.vue';

# Usage

# Basic Usage

<template>
  <PressMatchResultDialog
    :show="show"
    result-title="Sorry, not qualified"
    match-cover="https://placehold.co/78x78"
    match-name="Honor of Kings City Tournament"
    match-info="Ranked 14th"
    tip-text="Keep trying, try other matches!"
    primary-btn-text="Share"
    secondary-btn-text="Join Other Matches"
    @close="handleClose"
    @primary-action="handlePrimaryAction"
    @secondary-action="handleSecondaryAction"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const show = ref(false);

const handleClose = () => {
  show.value = false;
};

const handlePrimaryAction = () => {
  console.log('Click primary action button');
};

const handleSecondaryAction = () => {
  console.log('Click secondary action button');
};
</script>

# Result Display with Trophy

<template>
  <PressMatchResultDialog
    :show="showWin"
    result-title="Congratulations on advancing!"
    match-name="Honor of Kings City Tournament"
    match-info="Champion"
    tip-text="Keep going and strive for better results!"
    match-cups="https://image-1251917893.file.myqcloud.com/general-match-components/img/result-item/champion-pic.png"
    primary-btn-text="Continue Match"
    secondary-btn-text="Share Results"
    @close="handleClose"
    @primary-action="handleContinue"
    @secondary-action="handleShare"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const showWin = ref(false);

const handleClose = () => {
  showWin.value = false;
};

const handleContinue = () => {
  console.log('Continue match');
};

const handleShare = () => {
  console.log('Share results');
};
</script>

# Custom Style

<template>
  <PressMatchResultDialog
    :show="show"
    result-title="Match Ended"
    match-name="Spring League"
    item-custom-class="my-result-item"
    @close="handleClose"
  />
</template>

<style>
.my-result-item {
  --pri-title-color: #ff6b6b;
  --pri-name-color: #4ecdc4;
  --pri-bg-pic: url('https://example.com/custom-bg.png');
}
</style>

# API

# Props

Attribute Description Type Default
show Whether to show dialog boolean false
z-index DialogPlus z-index number 1000
mask-closable Whether to close when clicking mask boolean true
result-title Result title string ''
match-cover Match cover image URL string ''
match-name Match name string ''
match-info Match information string ''
tip-text Tip text string ''
primary-btn-text Primary button text string 确认
secondary-btn-text Secondary button text string 取消
match-cups Trophy image URL string ''
item-custom-class PressMatchResultItem custom class name string ''

# Events

Event Description Arguments
close Triggered when closing dialog -
primary-action Triggered when clicking primary action button -
secondary-action Triggered when clicking secondary action button -

# Methods

Method Description Parameters Return Value
onClose Close dialog - -

# Theming

The component is built on PressPopup and PressMatchResultItem. For style customization, please refer to the theming documentation of the corresponding components.

# CSS Variables

The component itself provides the following CSS variables (applied via :deep()):

Name Default Value Description
--popup-background-color transparent PopupPlus background color
--popup-close-icon-color #fff Close icon color
--popup-close-icon-size .5rem Close icon size

# PressMatchResultItem Style Customization

You can pass a custom class name through the item-custom-class prop, and then use the CSS variables provided by PressMatchResultItem for style customization. See PressMatchResultItem Theming for details.

<template>
  <PressMatchResultDialog
    :show="show"
    item-custom-class="custom-result"
  />
</template>

<style>
.custom-result {
  --pri-title-color: #ffd700;
  --pri-name-color: #fff;
  --pri-bg-pic: url('https://example.com/custom-bg.png');
}
</style>

← MatchResultItem →