PageResult 反馈结果

优质

小牛编辑

129浏览

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	反馈类型	`String`	`success`	`error`
icon	反馈图标(当 type 指定为 success 或 error 时无效)	`String`	`selected`	详见`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;`	-	-