3.0.3 • Published 5 years ago
@beisen-cmps/italent-notification v3.0.3
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层级