Result

Brief Introduction

The Result component is used to display the status of an operation result.
You can use <MYResult></MYResult> to display a result.

Basic Usage

Use the title prop to set the main title and the subTitle prop to set the subtitle.

Code Demo

Operation Successful

Your operation has been completed successfully

<template>
    <MYResult title='Operation Successful' subTitle='Your operation has been completed successfully' />
</template>

展开代码

Icon Types

Use the icon prop to set the result icon.

Code Demo

Primary Result

This is a primary result

Success Result

Operation completed successfully

Warning Result

Please pay attention to related matters

Error Result

Operation failed, please try again

Info Result

This is an information message

<template>
    <div style='display: flex; flex-direction: column; gap: 20px;'>
        <MYResult icon='primary' title='Primary Result' subTitle='This is a primary result' />
        <MYResult icon='success' title='Success Result' subTitle='Operation completed successfully' />
        <MYResult icon='warning' title='Warning Result' subTitle='Please pay attention to related matters' />
        <MYResult icon='error' title='Error Result' subTitle='Operation failed, please try again' />
        <MYResult icon='info' title='Info Result' subTitle='This is an information message' />
    </div>
</template>

展开代码

Slot Usage

Use slots to customize the subtitle and extra content.

Code Demo

Operation Successful

Custom subtitle content with HTML support

<template>
    <MYResult title='Operation Successful' icon='success'>
        <template #sub-title>
            <div style='color: #52c41a; font-weight: bold;'>
                Custom subtitle content with HTML support
            </div>
        </template>
        <template #extra>
            <div style='display: flex; gap: 10px; justify-content: center;'>
                <MYButton type='primary'>Back to Home</MYButton>
                <MYButton type='info'>View Details</MYButton>
            </div>
        </template>
    </MYResult>
</template>

展开代码

Combined Usage

Finally, here is a combination of multiple APIs to create a result page:

Code Demo

Combined Usage Example

This is a complete example of combined usage

<template>
    <MYResult 
        title='Combined Usage Example'
        icon='success'
    >
        <template #sub-title>
            <div style='color: #409EFF;'>
                This is a complete example of combined usage
            </div>
        </template>
        <template #extra>
            <div style='display: flex; gap: 10px; justify-content: center;'>
                <MYButton type='primary' size='large'>Primary Action</MYButton>
                <MYButton type='info' size='large' plain>Secondary Action</MYButton>
            </div>
        </template>
    </MYResult>
</template>

展开代码

API Reference

Props

Prop	Description	Type	Options	Default
title	Main title	string	—	''
subTitle	Subtitle	string	—	''
icon	Icon type	string	primary/success/warning/error/info	'info'

Slots

Name	Description
sub-title	Custom subtitle content
extra	Extra content area

Type Definitions

interface ResultProps {
  title?: string;
  subTitle?: string;
  icon?: 'primary' | 'success' | 'warning' | 'error' | 'info';
}