error-component-test 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +30 -0
- package/src/images/400.jpeg +0 -0
- package/src/images/500.jpeg +0 -0
- package/src/index.less +35 -0
- package/src/index.tsx +29 -0
package/package.json
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "error-component-test",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "异常组件",
|
|
5
|
+
"homepage": "",
|
|
6
|
+
"license": "ISC",
|
|
7
|
+
"module": "src/index.tsx",
|
|
8
|
+
"publishConfig": {
|
|
9
|
+
"access": "public",
|
|
10
|
+
"registry": "https://registry.npmjs.org"
|
|
11
|
+
},
|
|
12
|
+
"scripts": {
|
|
13
|
+
"compile": "postcss ./src/**/*.css -c -d ./ && tsc -p tsconfig.json -outDir ./"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"src"
|
|
17
|
+
],
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"react": "^16.8.6",
|
|
20
|
+
"react-dom": "^16.8.6",
|
|
21
|
+
"tslib": "^1.10.0",
|
|
22
|
+
"typescript": "^3.7.4"
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"autoprefixer": "^9.7.4",
|
|
26
|
+
"postcss": "^7.0.27",
|
|
27
|
+
"postcss-cli": "^7.1.0",
|
|
28
|
+
"postcss-modules": "^1.5.0"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
Binary file
|
|
Binary file
|
package/src/index.less
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
.error-component {
|
|
2
|
+
padding: 151px 24px 251px;
|
|
3
|
+
|
|
4
|
+
.error-component-content {
|
|
5
|
+
color: #065EB8;
|
|
6
|
+
font-size: 14px;
|
|
7
|
+
line-height: 20px;
|
|
8
|
+
text-align: center;
|
|
9
|
+
|
|
10
|
+
& > a {
|
|
11
|
+
text-decoration: underline;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.error-component-img {
|
|
16
|
+
width: 328px;
|
|
17
|
+
height: 150px;
|
|
18
|
+
display: block;
|
|
19
|
+
margin: 0 auto;
|
|
20
|
+
background: url("./images/500.jpeg") center no-repeat;
|
|
21
|
+
background-size: cover;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.error-component-img-404 {
|
|
25
|
+
background-image: url("./images/400.jpeg");
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.error-component-text {
|
|
29
|
+
color: #333;
|
|
30
|
+
font-size: 16px;
|
|
31
|
+
font-weight: 600;
|
|
32
|
+
line-height: 22px;
|
|
33
|
+
margin-bottom: 8px;
|
|
34
|
+
}
|
|
35
|
+
}
|
package/src/index.tsx
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import './index.less';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import classnames from 'classnames';
|
|
4
|
+
|
|
5
|
+
interface IProps {
|
|
6
|
+
text?: string; // 提示的文案
|
|
7
|
+
type?: string; //状态:404 or 500
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* 异常提示组件
|
|
12
|
+
*/
|
|
13
|
+
const Error = (props: IProps) => {
|
|
14
|
+
return (
|
|
15
|
+
<div className="error-component">
|
|
16
|
+
<div className="error-component-content">
|
|
17
|
+
<span className={classnames('error-component-img', props.type === '404' && 'error-component-img-404')}></span>
|
|
18
|
+
<p className="error-component-text">{props.text || '服务器正在开小差，请稍后再试'}</p>
|
|
19
|
+
<a href="/">返回首页</a>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
Error.defaultProps = {
|
|
26
|
+
type: '500'
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export default Error;
|