Press Next

# MatchMessagesMap AI 办赛地图选择组件

AI 办赛地图选择组件，用于展示不同的游戏地图选项，支持横向滚动和地图选择功能。

# 引入

import PressMatchMessagesMap from "press-next/press-match-messages-map/press-match-messages-map";

# 代码演示

# 基础用法

<template>
  <PressMatchMessagesMap
    :map-list="mapList"
    @map-selected="handleMapSelected"
  />
</template>

<script setup lang="ts">
import PressMatchMessagesMap from "press-next/press-match-messages-map/press-match-messages-map";
import type { MapItem } from "press-next/press-match-messages-map/demo-data";

const mapList: MapItem[] = [
  {
    id: 1,
    name: "召唤师峡谷",
    image: "https://game.gtimg.cn/images/lol/act/img/map/map1.jpg",
    description: "经典5v5地图",
    selected: true,
  },
  {
    id: 2,
    name: "极地大乱斗",
    image: "https://game.gtimg.cn/images/lol/act/img/map/map2.jpg",
    description: "单路混战地图",
    selected: false,
  },
];

const handleMapSelected = (map: MapItem) => {
  console.log("选择的地图:", map);
};
</script>

# API

# Props

参数 说明 类型 默认值
map-list 地图选项列表 MapItem[] []

# Events

事件名 说明 参数
map-selected 选择地图选项 map: MapItem 地图项

# MapItem 类型

属性 说明 类型
id 唯一标识 string | number
name 地图名称 string
image 地图图片 string
description 地图描述 string
selected 是否选中 boolean

# 主题定制

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

# 样式变量

名称 默认值 描述
--pmm-map-spacing-sm .16rem 小间距
--pmm-map-spacing-md .24rem 中等间距
--pmm-map-item-padding .16rem 项目内边距
--pmm-map-item-width 2.4rem 项目宽度
--pmm-map-item-height 1.6rem 项目图片高度
--pmm-map-icon-size .32rem 选中图标尺寸
--pmm-map-item-bg #fff 项目背景色
--pmm-map-selected-bg rgba(211, 212, 252, 0.48) 选中背景色
--pmm-map-item-border rgba(211, 212, 252, 0.48) 项目边框色
--pmm-map-item-selected-border #9a86fe 选中边框色
--pmm-map-text-color #483081 主要文字颜色
--pmm-map-secondary-text-color #666 次要文字颜色
--pmm-map-font-size .24rem 主要字体大小
--pmm-map-secondary-font-size .2rem 次要字体大小
--pmm-map-font-weight 600 字体重量
--pmm-map-item-radius .08rem 项目圆角

← MatchMessagesMode →