Tantalum UI

Appearance

Return to top
On this page

Result 结果

vue
<template>
  <ta-group title="基础用法">
    <ta-result
      type="info"
      title="标题"
      description="内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现。"
    ></ta-result>
  </ta-group>
  <ta-group title="type=success & showBack=false">
    <ta-result
      type="success"
      title="支付成功"
      description="内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现。"
      :showBack="false"
    ></ta-result>
  </ta-group>
  <ta-group title="type=warning & 自定义按钮文案">
    <ta-result
      type="warning"
      title="遇到问题"
      description="内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现。"
      confirmText="自定义确定"
      backText="自定义返回"
    ></ta-result>
  </ta-group>
  <ta-group title="type=fail & Slot default">
    <ta-result
      type="fail"
      title="支付失败"
      description="内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现。"
    >
      <div class="exp-result-extra">在这里可以附加组件元素或者相应的提示文案，样式自定。</div>
    </ta-result>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ExpResult'
})
</script>

Import

js
import { TaResult } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type { ResultType } from 'tantalum-ui-mobile'

Props

属性类型默认值必填说明
typeResultType'info'否类型，对应不同的提示图标，可选 'info', 'warning', 'success', 'fail'
titlestring''否标题
descriptionstring''否小标题，副标题，描述
show-backbooleantrue否是否显示返回按钮
confirm-textstring'确定'否确认按钮的文字
back-textstring'返回'否返回按钮的文字

Events

事件描述回调函数参数
confirm确认按钮点击e: Event
back返回按钮点击e: Event

Slots

附加内容（#default）

vue
<ta-result type="fail" title="支付失败" description="">
  <div class="result-extra">
    在这里可以附加组件元素或者相应的提示文案，样式自定。
  </div>
</ta-result>