Result 结果页 APP
该方法或组件支持移动端小程序调用
PC
该方法或组件支持桌面端小程序调用

在整张页面中组织插画、图标、文字等内容,向用户反馈操作结果。

规则

  • 用作非常重要的操作反馈,如支付成功,无网络状态。
  • 个性化且优美的插画,可以提升品牌形象。
  • 对于错误类型的结果页,页面中需要提供明确的行动点,eg:重新加载。

引入方式

数字生活网页应用工程中,不需要 import,直接使用组件标签即可。

import { Result } from '@21cnfe/vui'  
Vue.component('Result', Result)

代码演示

基本用法 最简单的用法,只需传入 title 标题和 message 信息,使用默认图标
<Result :title="title" :message="message" />
插入图标 使用 UI 组件库的图标,color 属性设置图标颜色
<Result :icon="icon" :color="color" :title="title" :message="message" />
插入图片
<Result :imgUrl="imgUrl" :title="title" :message="message" />

API

属性 说明 类型 默认值
title title 文案 String --
message message 文案 String --
icon 插入Vui图标,使用类名,会覆盖 imgUrl 设置 String --
color svg图标颜色 String --
imgUrl 插图 url String (Image Source) --
  1. 1. Result 结果页 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用
    1. 1.1. 规则
    2. 1.2. 引入方式
    3. 1.3. 代码演示
    4. 1.4. API