Press Next

# MatchModifyTeamEmblemDialog 修改队徽弹窗

一个用于修改队徽的弹窗组件，支持从预设的队徽列表中选择新的队徽。

# 引入

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

# 代码演示

# 基础用法

<template>
  <PressButton @click="show = true">
    修改队徽
  </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: '队徽1',
    selected: true,
  },
  {
    id: 2,
    url: 'https://example.com/logo2.png',
    name: '队徽2',
    selected: false,
  },
];

const handleConfirm = (logo) => {
  console.log('确认选择队徽:', logo);
};

const handleChange = (logo) => {
  console.log('队徽选择变化:', logo);
};
</script>

# 使用 Mock 数据

<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('弹窗关闭');
};

const handleConfirm = (logo) => {
  console.log('确认选择队徽:', logo);
};
</script>

# 自定义按钮

<template>
  <PressMatchModifyTeamEmblemDialog
    :show="show"
    title="选择新队徽"
    button-text="确认修改"
    :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 ? '保存中...' : '保存队徽' }}
      </PressButton>
    </template>
  </PressMatchModifyTeamEmblemDialog>
</template>

# API

# Props

参数 说明 类型 默认值
show 是否显示弹窗 boolean false
title 弹窗标题 string '修改队徽'
buttonText 确认按钮文字 string '确定修改'
logoList 队徽列表数据 LogoItem[] []
customClass 自定义样式类名 string ''

# LogoItem 数据结构

属性 说明 类型 必填
id 队徽唯一标识 string | number 否
url 队徽图片URL string 是
name 队徽名称 string 否
selected 是否选中 boolean 否

# Events

事件名 说明 回调参数
close 弹窗关闭时触发 -
confirm 点击确认按钮时触发 logo: LogoItem - 选中的队徽对象
change 队徽选择变化时触发 logo: LogoItem - 当前选中的队徽对象

# Slots

插槽名 说明 参数
confirm-btn 自定义确认按钮 -

# Mock 数据 API

函数 说明
getMockData() 获取默认 mock 数据

# 主题定制

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

# 样式变量

名称 默认值 描述
--pmted-list-gap-spacing .48rem 列表间距
--pmted-item-spacing .04rem item内边距
--pmted-logo-item-size 1.44rem 队徽item大小
--pmted-item-bg-color #fff 队徽item背景色
--pmted-item-border-color $color-border-tertiary 队徽item边框色
--pmted-bg-color #fff 弹窗背景色
--pmted-item-bg-active-color $color-surface-brand-light 队徽item选中背景色
--pmted-item-border-active-color $color-border-brand 队徽item选中边框色
--pmted-item-border-radius 0 队徽item圆角

# 使用示例

: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;
}

# 注意事项

  1. 数据格式：logoList 中每个队徽对象必须包含 url 字段
  2. 选中状态：通过 logoList 中的 selected: true 设置初始选中状态
  3. 事件返回：confirm 和 change 事件返回完整的 LogoItem 对象
  4. 小程序兼容：支持微信小程序的 virtualHost 和 styleIsolation 配置

# 依赖组件

  • PressMatchPopUp: 基础弹窗组件
  • PressButton: 按钮组件

← MatchMpAuthorizePopup →