Result 결과

원문 보기 위키 갱신 2026.10.11

동작 결과에 대한 피드백이에요.

출처: 문서

본문

언제 사용하나요

사용자의 동작 결과나 비정상 상태에 대해 피드백할 때 사용해요.

기본 사용법

:::demo

<template>
  <div>
    <d-row wrap>
      <d-col :lg="6" :xs="24">
        <d-result icon="success" title="操作成功" desc="操作成功描述"></d-result>
      </d-col>
      <d-col :lg="6" :xs="24">
        <d-result icon="danger" title="操作失败" desc="操作失败描述"></d-result>
      </d-col>
      <d-col :lg="6" :xs="24"><d-result icon="warning" title="操作警告" desc="操作警告描述"></d-result></d-col>
      <d-col :lg="6" :xs="24"><d-result icon="info" title="操作信息" desc="操作信息描述"></d-result></d-col>
    </d-row>
  </div>
</template>

:::

커스터마이즈

:::demo

<template>
  <div>
    <d-result desc="操作成功描述">
      <template #icon>
        <d-icon name="insert-image" size="64px"></d-icon>
      </template>
      <template #title>这是自定义标题</template>
      <template #extra>
        <d-button id="primaryBtn" style="margin-right: 8px">回到首页</d-button>
      </template>
    </d-result>
  </div>
</template>

:::

Result 파라미터

파라미터	타입	기본값	설명	Demo 링크
icon	ResultIcon	'info'	icon 타입 지정	기본 사용법
title	string	-	결과 제목	기본 사용법
desc	string	-	결과 설명	기본 사용법

Result 슬롯

파라미터	설명
icon	아이콘 커스텀
title	제목 커스텀
desc	설명 콘텐츠 커스텀
extra	하단 추가 영역

Result 타입 정의

ResultIcon

type ResultIcon = 'success' | 'danger' | 'warning' | 'info';

더 알아보기 (Learn more)

icon 파라미터로 success·danger·warning·info 네 가지 상태 아이콘을 고르고, icon·title·desc·extra 슬롯으로 결과 화면을 완전히 커스터마이즈할 수 있어요.