当前位置: 首页 > 文档资料 > FeArt 中文文档 >

PageResult 反馈结果

优质
小牛编辑
136浏览
2023-12-01

使用指南

组件介绍

可自定义图标、颜色、标题、内容、按钮等。

引入方式

import { PageResult, FeIcon } from 'feart';
components:{
  FeIcon,
  'fe-page-result':PageResult,
}

代码演示

默认

<fe-page-result :btnList="btnList"></fe-page-result>

失败

<fe-page-result type="error" :btnList="btnList"> </fe-page-result>

Icon 组件内图标

<fe-page-result icon="success" title="Icon组件内图标" :btnList="btnList"></fe-page-result>

自定义图标

<fe-page-result color="#F4333C" title="自定义图标" :btnList="btnList">
  <FeIcon name="lwarning" color="#ff976a" size="65px" />
</fe-page-result>

自定义内容

<fe-page-result
  title="我是标题"
  description="黎明的那道光 会越过黑暗 打破一切恐惧我能
    找到答案 哪怕要逆着光 就驱散黑暗 丢弃所有的负担 不再孤单 不再孤单"
  :btnList="btnList"
>
</fe-page-result>
export default {
  data() {
    return {
      btnList: [
        { label: '主要操作', type: 'primary', plain: false, action: this.mainOperate },
        { label: '辅助操作', type: 'primary', plain: true, action: this.assistOperate },
      ],
    };
  },
  methods: {
    mainOperate(v) {
      console.log('主要操作');
    },
    assistOperate(v) {
      console.log('辅助操作');
    },
  },
  // ...
};

API

参数说明类型默认值可选值
type反馈类型Stringsuccesserror
icon反馈图标(当 type 指定为 success 或 error 时无效)Stringselected详见Icon组件
title反馈标题(当 type 指定为 success 或 error 时无效)String反馈成功-
description反馈内容String--
color反馈图标颜色(当 type 指定为 success 或 error 时无效)String#108EE9-
btnList操作按钮,label 为按钮文字,type 为按钮类型(同 Bttton 组件),action 为按钮点击事件,this.XXX 为调用 methods 函数Array[{label: '主要操作', type: 'primary', plain: false, action: this.mainOperate},{label: '辅助操作', type: 'primary', plain: true, action: this.assistOperate}]-

Events

参数说明类型默认值可选值
mainOperate主要操作(value) => void;--
assistOperate辅助操作(value) => void;--