Skip to content

Commit c6a2464

Browse files
liyuan-mengliyuan-meng
committed
Merge branch 'feat-imageText-mly' of github.com:ShuyunFF2E/cloud-react into v1-develop
2 parents 8f18d02 + 160e8c5 commit c6a2464

8 files changed

Lines changed: 204 additions & 116 deletions

File tree

‎src/components/format/demos/link.md‎

Lines changed: 33 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -9,84 +9,80 @@ desc: 链接格式化模板，支持点击跳转、自定义点击事件
99
* title: 链接格式化
1010
* desc: 链接格式化模板，支持点击跳转、自定义点击事件
1111
*/
12-
import React from 'react';
13-
import { Format } from 'cloud-react';
12+
import React from "react";
13+
import { Format } from "cloud-react";
14+
15+
const style = {
16+
padding: "8px",
17+
background: "#FAFAFA",
18+
borderRadius: "4px",
19+
padding: 12,
20+
};
1421

1522
class LinkDemo extends React.Component {
1623
handleClick = () => {
17-
alert('自定义点击事件被触发！');
24+
alert("自定义点击事件被触发！");
1825
};
1926

2027
render() {
2128
const mockRow = {
22-
url: 'https://www.example.com',
23-
detailUrl: 'https://www.example.com/detail',
24-
downloadUrl: 'https://www.example.com/download'
29+
url: "https://www.example.com",
30+
detailUrl: "https://www.example.com/detail",
31+
downloadUrl: "https://www.example.com/download",
2532
};
2633

2734
return (
2835
<div style={{ width: 400 }}>
2936
<div style={{ marginBottom: 20 }}>
3037
<h5>基础链接格式化：</h5>
31-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px' }}>
32-
<Format.LinkTpl
33-
value="点击查看详情"
34-
row={mockRow}
35-
linkKey="url"
36-
/>
38+
<div style={style}>
39+
<Format.LinkTpl value="点击查看详情" row={mockRow} linkKey="url" />
3740
</div>
3841
</div>
39-
42+
4043
<div style={{ marginBottom: 20 }}>
41-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px' }}>
42-
<Format.LinkTpl
44+
<div style={style}>
45+
<Format.LinkTpl
4346
value="查看详细信息"
4447
row={mockRow}
4548
linkKey="detailUrl"
4649
/>
4750
</div>
4851
</div>
49-
52+
5053
<div style={{ marginBottom: 20 }}>
5154
<h5>使用自定义链接：</h5>
52-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px' }}>
53-
<Format.LinkTpl
55+
<div style={style}>
56+
<Format.LinkTpl
5457
value="下载文件"
5558
link="https://www.example.com/download"
5659
/>
5760
</div>
5861
</div>
59-
62+
6063
<div style={{ marginBottom: 20 }}>
6164
<h5>自定义点击事件：</h5>
62-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px' }}>
63-
<Format.LinkTpl
64-
value="点击触发事件"
65-
onClick={this.handleClick}
66-
/>
65+
<div style={style}>
66+
<Format.LinkTpl value="点击触发事件" onClick={this.handleClick} />
6767
</div>
6868
</div>
69-
69+
7070
<div style={{ marginBottom: 20 }}>
7171
<h5>多行显示：</h5>
72-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px', width: '200px' }}>
73-
<Format.LinkTpl
74-
value="这是一段很长的链接文本，可能会超出容器宽度，此时会显示省略号"
72+
<div style={{ ...style, width: 200 }}>
73+
<Format.LinkTpl
74+
value="这是一段很长的链接文本，可能会超出容器宽度，此时会显示省略号这是一段很长的链接文本，可能会超出容器宽度，此时会显示省略号"
7575
row={mockRow}
7676
linkKey="url"
77-
line={2}
77+
line={3}
7878
/>
7979
</div>
8080
</div>
81-
81+
8282
<div>
8383
<h5>空值处理：</h5>
84-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px' }}>
85-
<Format.LinkTpl
86-
value={null}
87-
row={mockRow}
88-
linkKey="url"
89-
/>
84+
<div style={style}>
85+
<Format.LinkTpl value={null} row={mockRow} linkKey="url" />
9086
</div>
9187
</div>
9288
</div>
@@ -95,4 +91,4 @@ class LinkDemo extends React.Component {
9591
}
9692

9793
export default LinkDemo;
98-
```
94+
```

‎src/components/format/demos/number.md‎

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,51 +9,65 @@ desc: 数字格式化模板，支持千分位、小数位数、前缀后缀
99
* title: 数字格式化
1010
* desc: 数字格式化模板，支持千分位、小数位数、前缀后缀
1111
*/
12-
import React from 'react';
13-
import { Format } from 'cloud-react';
12+
import React from "react";
13+
import { Format } from "cloud-react";
14+
15+
const style = {
16+
padding: "8px",
17+
background: "#FAFAFA",
18+
borderRadius: "4px",
19+
padding: 12,
20+
};
1421

1522
class NumberDemo extends React.Component {
1623
render() {
1724
return (
1825
<div style={{ width: 400 }}>
1926
<div style={{ marginBottom: 20 }}>
2027
<h5>基础数字格式化：</h5>
21-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px' }}>
28+
<div style={style}>
2229
<Format.NumberTpl value={1234567} />
2330
</div>
2431
</div>
25-
32+
2633
<div style={{ marginBottom: 20 }}>
2734
<h5>带小数位数：</h5>
28-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px' }}>
35+
<div style={style}>
2936
<Format.NumberTpl value={1234.5678} precision={2} />
3037
</div>
3138
</div>
32-
39+
40+
<div style={{ marginBottom: 20 }}>
41+
<h5>带前缀：</h5>
42+
<div style={style}>
43+
<Format.NumberTpl value={1234567} prefix="¥" />
44+
</div>
45+
</div>
46+
3347
<div style={{ marginBottom: 20 }}>
34-
<h5>带前缀后缀：</h5>
35-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px' }}>
36-
<Format.NumberTpl value={1234567} prefix="¥" suffix="元" />
48+
<h5>带后缀：</h5>
49+
<div style={style}>
50+
<Format.NumberTpl value={1234567} suffix="元" />
3751
</div>
3852
</div>
39-
53+
4054
<div style={{ marginBottom: 20 }}>
4155
<h5>不使用千分位：</h5>
42-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px' }}>
56+
<div style={style}>
4357
<Format.NumberTpl value={1234567} isThousands={false} />
4458
</div>
4559
</div>
46-
60+
4761
<div style={{ marginBottom: 20 }}>
4862
<h5>百分比格式：</h5>
49-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px' }}>
63+
<div style={style}>
5064
<Format.NumberTpl value={0.1234} precision={2} suffix="%" />
5165
</div>
5266
</div>
53-
67+
5468
<div>
5569
<h5>空值处理：</h5>
56-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px' }}>
70+
<div style={style}>
5771
<Format.NumberTpl value={null} />
5872
</div>
5973
</div>
@@ -63,4 +77,4 @@ class NumberDemo extends React.Component {
6377
}
6478

6579
export default NumberDemo;
66-
```
80+
```

‎src/components/format/demos/text.md‎

Lines changed: 32 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,55 +9,68 @@ desc: 文本格式化模板，支持多行显示、Tooltip提示
99
* title: 文本格式化
1010
* desc: 文本格式化模板，支持多行显示、Tooltip提示
1111
*/
12-
import React from 'react';
13-
import { Format } from 'cloud-react';
12+
import React from "react";
13+
import { Format } from "cloud-react";
14+
15+
const style = {
16+
padding: "8px",
17+
background: "#FAFAFA",
18+
borderRadius: "4px",
19+
padding: 12,
20+
};
1421

1522
class TextDemo extends React.Component {
1623
render() {
1724
return (
1825
<div style={{ width: 400 }}>
1926
<div style={{ marginBottom: 20 }}>
2027
<h5>基础文本格式化：</h5>
21-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px' }}>
28+
<div style={style}>
2229
<Format.TextTpl value="这是一段普通的文本内容" />
2330
</div>
2431
</div>
25-
32+
2633
<div style={{ marginBottom: 20 }}>
2734
<h5>单行显示（默认）：</h5>
28-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px', width: '200px' }}>
29-
<Format.TextTpl value="这是一段很长的文本内容，可能会超出容器宽度，此时会显示省略号" line={1} />
35+
<div style={style}>
36+
<Format.TextTpl
37+
value="这是一段很长的文本内容，可能会超出容器宽度，此时会显示省略号"
38+
line={1}
39+
/>
3040
</div>
3141
</div>
32-
42+
3343
<div style={{ marginBottom: 20 }}>
3444
<h5>多行显示：</h5>
35-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px', width: '200px' }}>
36-
<Format.TextTpl value="这是一段很长的文本内容，可能会超出容器宽度，此时会显示省略号" line={2} />
45+
<div style={{ ...style, width: 200 }}>
46+
<Format.TextTpl
47+
value="这是一段很长的文本内容，可能会超出容器宽度，此时会显示省略号，这是一段很长的文本内容，可能会超出容器宽度，此时会显示省略号"
48+
line={3}
49+
/>
3750
</div>
3851
</div>
39-
52+
4053
<div style={{ marginBottom: 20 }}>
4154
<h5>自定义Tooltip内容：</h5>
42-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px', width: '200px' }}>
43-
<Format.TextTpl
44-
value="这是一段很长的文本内容，可能会超出容器宽度，此时会显示省略号"
45-
line={1}
55+
<div style={{ ...style, width: 200 }}>
56+
<Format.TextTpl
57+
value="这是一段很长的文本内容，可能会超出容器宽度，此时会显示省略号，这是一段很长的文本内容，可能会超出容器宽度，此时会显示省略号"
58+
line={2}
4659
tooltipValue="这是自定义的Tooltip提示内容"
4760
/>
4861
</div>
4962
</div>
50-
63+
5164
<div style={{ marginBottom: 20 }}>
5265
<h5>数字类型：</h5>
53-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px' }}>
66+
<div style={style}>
5467
<Format.TextTpl value={12345} />
5568
</div>
5669
</div>
57-
70+
5871
<div>
5972
<h5>空值处理：</h5>
60-
<div style={{ padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px' }}>
73+
<div style={style}>
6174
<Format.TextTpl value={null} />
6275
</div>
6376
</div>
@@ -67,4 +80,4 @@ class TextDemo extends React.Component {
6780
}
6881

6982
export default TextDemo;
70-
```
83+
```

0 commit comments

Comments
 (0)