MatchResultDialog 比赛结果弹窗

# MatchResultDialog 比赛结果弹窗

比赛结果弹窗组件，用于展示比赛结果信息，包括结果标题、赛事封面、奖杯、提示文字和操作按钮。基于 PressPopup 和 PressMatchResultItem 实现。

# 引入

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

# 代码演示

# 基础用法

<template>
  <PressMatchResultDialog
    :show="show"
    result-title="很遗憾，未晋级"
    match-cover="https://placehold.co/78x78"
    match-name="王者荣耀城市赛"
    match-info="获得第14名"
    tip-text="再接再厉，试试其他比赛吧~"
    primary-btn-text="分享一下"
    secondary-btn-text="报名其他比赛"
    @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('点击主要操作按钮');
};

const handleSecondaryAction = () => {
  console.log('点击次要操作按钮');
};
</script>

# 带奖杯的结果展示

<template>
  <PressMatchResultDialog
    :show="showWin"
    result-title="恭喜晋级！"
    match-name="王者荣耀城市赛"
    match-info="获得冠军"
    tip-text="继续加油，争取更好成绩！"
    match-cups="https://image-1251917893.file.myqcloud.com/general-match-components/img/result-item/champion-pic.png"
    primary-btn-text="继续比赛"
    secondary-btn-text="分享成绩"
    @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('继续比赛');
};

const handleShare = () => {
  console.log('分享成绩');
};
</script>

# 自定义样式

<template>
  <PressMatchResultDialog
    :show="show"
    result-title="比赛结束"
    match-name="春季联赛"
    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

参数	说明	类型	默认值
show	是否显示弹窗	boolean	`false`
z-index	弹窗层级	number	`1000`
mask-closable	点击蒙层是否关闭	boolean	`true`
result-title	结果标题	string	`''`
match-cover	赛事封面图片URL	string	`''`
match-name	赛事名称	string	`''`
match-info	赛事信息	string	`''`
tip-text	提示文字	string	`''`
primary-btn-text	主要按钮文字	string	`确认`
secondary-btn-text	次要按钮文字	string	`取消`
match-cups	奖杯图片URL	string	`''`
item-custom-class	PressMatchResultItem 自定义类名	string	`''`

# Events

事件名	说明	回调参数
close	关闭弹窗时触发	-
primary-action	点击主要操作按钮时触发	-
secondary-action	点击次要操作按钮时触发	-

# Methods

方法名	说明	参数	返回值
onClose	关闭弹窗	-	-

# 主题定制

组件基于 PressPopup 和 PressMatchResultItem 实现，样式定制请参考对应组件的主题定制说明。

# 样式变量

组件本身提供以下 CSS 变量（通过 :deep() 应用）：

名称	默认值	描述
--popup-background-color	transparent	弹窗背景颜色
--popup-close-icon-color	#fff	关闭图标颜色
--popup-close-icon-size	.5rem	关闭图标大小

# PressMatchResultItem 样式定制

可以通过 item-custom-class 属性传入自定义类名，然后使用 PressMatchResultItem 提供的 CSS 变量进行样式定制。详见 PressMatchResultItem 主题定制。

<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>

← MatchResetPopup MatchResultItem →