MatchMessagesTime

AI competition time setting and adjustment component for AI competition scenarios, supports date-time picker popup.

Import

import PressMatchMessagesTime from 'press-next/press-match-messages-time/press-match-messages-time';

Usage

Basic Usage

<template>
  <PressMatchMessagesTime
    :content="{ time: '2024-12-25 14:30' }"
    @time-click="handleTimeClick"
  />
</template>

<script setup lang="ts">
const handleTimeClick = (event: { time: string }) => {
  console.log('Selected time:', event.time);
};
</script>

API

Props

Attribute	Description	Type	Default
content	Time content	ContentProps	-

ContentProps

Attribute	Description	Type	Default
time	Time text	string	-

Events

Event	Description	Arguments
time-click	Click time select	event: { time: string }

Theme Customization

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to the ConfigProvider component.

Style Variables

Name	Default Value	Description
--pmm-time-spacing-sm	.16rem	Small spacing
--pmm-time-spacing-md	.24rem	Medium spacing
--pmm-time-spacing-lg	.32rem	Large spacing
--pmm-time-selector-height	.8rem	Selector height
--pmm-time-icon-size	.32rem	IconPlus size
--pmm-time-selector-bg	#ffffff	Selector background
--pmm-time-selector-border	rgba(211, 212, 252, 0.48)	Selector border
--pmm-time-time-color	#212124	Time text color
--pmm-time-icon-color	rgba(#212124, .75)	IconPlus color
--pmm-time-font-size-md	.28rem	Medium font size
--pmm-time-radius-md	.12rem	Medium border radius