italent 全局提示/局部提示组件

示例

  npm install @beisen-cmps/italent-notification --save

import React, { Component } from 'react';
import styled from 'styled-components';

import notification from '@beisen-cmps/italent-notification';
const Button1 = styled.button`
    position: absolute;
    left: 0;
    top: 0;
`;
const Button2 = styled.button`
    position: absolute;
    left: 0;
    bottom: 0;
`;
const Button3 = styled.button`
    position: absolute;
    top: 0;
    right: 0;
`;
const Button4 = styled.button`
    position: absolute;
    bottom: 0;
    right: 0;
`;
const Button5 = styled.button`
    position: absolute;
    left: 50%;
    top: 50%;
`;
const Button6 = styled.button`
    position: absolute;
    left: 100px;
    top: 100px;
`;
const Button7 = styled.button`
    position: absolute;
    right: 100px;
    top: 100px;
`;
const Button8 = styled.button`
    position: absolute;
    right: 200px;
    top: 100px;
`;
const Button9 = styled.button`
    position: absolute;
    right: 400px;
    top: 100px;
`;

export default class extends Component {
    handleClick1 = e => {
        e.stopPropagation();
        const target = e.target;
        notification.info({
            message: '测试哈哈哈哈哈', //弹出的message
            target,
            pos: 'leftBottom',
            topBias: 0,
            leftBias: 0,
            duration: 3000,
            showType: 2,
            maxWidth: 200,
        });
    };
    handleClick2 = e => {
        e.stopPropagation();
        const target = e.target;
        notification.error({
            message: '测试哈哈哈哈哈',
            target,
            pos: 'leftTop',
            showType: 2,
        });
    };
    handleClick3 = e => {
        e.stopPropagation();
        const target = e.target;
        notification.warning({
            message: '测试哈哈哈哈哈',
            target,
            pos: 'rightBottom',
            showType: 2,
        });
    };
    handleClick4 = e => {
        e.stopPropagation();
        const target = e.target;
        notification.info({
            message: '测试哈哈哈哈哈',
            target,
            pos: 'rightTop',
            showType: 2,
        });
    };
    handleClick5 = e => {
        e.stopPropagation();
        const target = e.target;
        notification.success({
            message: '测试哈哈哈哈哈',
            target,
            pos: 'centerBottom',
            showType: 2,
        });
    };
    handleClick6 = e => {
        e.stopPropagation();
        const target = e.target;
        notification.success({
            message: '测试哈哈哈哈哈',
            target,
            pos: 'centerTop',
            showType: 2,
        });
    };
    handleClick7 = e => {
        e.stopPropagation();
        const target = e.target;
        notification.success({
            message: '测试哈哈哈哈哈',
            pos: 'centerTop',
            showType: 1,
        });
    };
    handleClick8 = e => {
        e.stopPropagation();
        const target = e.target;
        notification.success({
            message: '测试哈哈哈哈哈',
            target,
            pos: 'left',
            showType: 2,
        });
    };
    handleClick9 = e => {
        e.stopPropagation();
        const target = e.target;
        notification.error({
            message: '测试哈哈哈哈哈',
            target,
            pos: 'right',
            showType: 2,
        });
    };
    render() {
        return (
            <ButtonBox>
                <Button1 onClick={this.handleClick1}>leftBottom</Button1>
                <Button2 onClick={this.handleClick2}>leftTop</Button2>
                <Button3 onClick={this.handleClick3}>rightBottom</Button3>
                <Button4 onClick={this.handleClick4}>rightTop</Button4>
                <Button5 onClick={this.handleClick5}>centerBottom</Button5>
                <Button6 onClick={this.handleClick6}>centerTop</Button6>
                <Button7 onClick={this.handleClick7}>global</Button7>
                <Button8 onClick={this.handleClick8}>left</Button8>
                <Button9 onClick={this.handleClick9}>right</Button9>
            </ButtonBox>
        );
    }
}

参数

提供成功、错误、警告、提示四种方法

notification.success(参数) 成功
notification.error(参数) 错误
notification.info(参数) 提示
notification.warning(参数) 警告

最简调用方式

notification.success('成功提示！'); //此为最简全局提示

showType 默认 1; 1:全局提示（顶部），2:局部提示（点击按钮附近）

message 提示信息

maxWidth 默认 300 ;最大宽度

target showType 为 2 时生效，定义局部提示的位置

duration 默认 2000 ;几秒后关闭

pos 默认 leftBottom ;showType 为 2 时生效，提示处于 target 的位置：leftBottom,leftTop,rightBottom,rightTop,cenetrTop,centerBottom,left,right

leftBias 默认 0; 左偏移

topBias 默认 0 ;上偏移

zIndex 默认 10000 ;z-index层级