exception info

@aligov/components-exception

exception component

API

参数名 说明 必填 类型 默认值 备注
type 默认类型 false String '' NET_ERR 网络异常
PAGE_ERR 页面异常
SYS_ERR 系统异常
NO_DATA 暂无数据
NOT_FOUND 404
NO_PER 403
size 大小 false String 'large' 现在只有 large 和 medium 两种类型
imgSrc 图片链接 false String 网络异常链接 /
title 主标题 false String '' /
subTitle 副标题 false String '' /
primaryBtnText 主按钮文案 false String '' /
secondaryBtnText 副按钮文案 false String '' /
link 次链接文案 false String '' /
onPrimaryClick 主按钮点击 false ()=>{} '' /
onSecondaryClick 次按钮点击 false ()=>{} '' /
onLinkClick 次链接点击 false ()=>{} '' /

DEMO 列表

基本用法

type提供几组常用模式

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Table, Radio} from '@alifd/next'
import Exceptions from '@aligov/components-exception';

const list = ['NET_ERR', 'PAGE_ERR', 'SYS_ERR', 'NO_DATA', 'NOT_FOUND', 'NO_PER'];

class App extends Component {
  constructor(props) {
      super(props);
      this.state={
          type: 'NET_ERR'
      }
      this.onChange = this.onChange.bind(this);
  }
   onChange(value) {
        this.setState({
            type: value
        });
        console.log('onChange', value);
    }



  render() {
    return (
      <div>
        <Radio.Group dataSource={list} onChange={this.onChange} value={this.state.type}/>

      <Exceptions type={this.state.type} />
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);

尺寸

用size指定尺寸，默认large

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Table, Radio} from '@alifd/next'
import Exceptions from '@aligov/components-exception';

const list = ['large', 'medium'];

class App extends Component {
  constructor(props) {
      super(props);
      this.state={
          size: 'large'
      }
      this.onChange = this.onChange.bind(this);
  }
   onChange(value) {
        this.setState({
            size: value
        });
        console.log('onChange', value);
    }



  render() {
    return (
      <div>
        <Radio.Group dataSource={list} onChange={this.onChange} value={this.state.size}/>

      <Exceptions size={this.state.size} type="NO_PER"/>
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);

自定义

可以自定义主标题，副标题，主按钮，副按钮，链接文案，会覆盖type文案

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Table} from '@alifd/next'
import Exceptions from '@aligov/components-exception';

class App extends Component {
  onPrimaryClick() {
    console.log('onPrimaryClick')
  }
  onSecondaryClick() {
    console.log('onSecondaryClick')
  }
  onLinkClick() {
    console.log('onLinkClick')
  }
  render() {
    return (
      <div>
 <Exceptions type="NO_DATA" subTitle="自定义文案" primaryBtnText="确认" secondaryBtnText="取消" onPrimaryClick={this.onPrimaryClick} onSecondaryClick={this.onSecondaryClick} size='medium'/>
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);

表格无数据异常

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Table} from '@alifd/next'
import Exceptions from '@aligov/components-exception';

class App extends Component {
  onPrimaryClick() {
    console.log('onPrimaryClick')
  }
  onSecondaryClick() {
    console.log('onSecondaryClick')
  }
  onLinkClick() {
    console.log('onLinkClick')
  }
  render() {
    return (
       <div>
      <Table dataSource={[]} emptyContent={<Exceptions type="NO_DATA" onPrimaryClick={this.onPrimaryClick} onSecondaryClick={this.onSecondaryClick} onLinkClick={this.onLinkClick} size='medium'/>}>
        <Table.Column title="Id" htmlTitle="Unique Id" dataIndex="id"/>
        <Table.Column title="Title" dataIndex="title.name" />
        <Table.Column title="Time" dataIndex="time"/>
    </Table>
        
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);