# Typography 排版
案例
import { defineComponent } from "vue";
import { Typography } from "sl-vue2-template";
const { H1, H2, H3, H4, H5, Text, P } = Typography;
export default defineComponent({
data() {
return {
show: false,
};
},
methods: {
onShowModel() {
this.show = !this.show;
},
},
render() {
return (
<div>
<H1 color="error" handlerClick={this.onShowModel}>
TEST1
</H1>
<H2>TEST2</H2>
<H3>TEST3</H3>
<H4>TEST4</H4>
<H5>TEST5</H5>
<Text handlerClick={this.onShowModel}>Text</Text>
<br />
<Text handlerClick={this.onShowModel} disabled>
Text
</Text>
<br />
<Text.Link size="40" handlerClick={this.onShowModel}>
link
</Text.Link>
<br />
<Text.Link handlerClick={this.onShowModel}>link</Text.Link>
<br />
<Text.Link handlerClick={this.onShowModel} disabled>
link disabled
</Text.Link>
<P>
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph{" "}
<Text.Link handlerClick={this.onShowModel}>link</Text.Link>
</P>
<Text.Link handlerClick={this.onShowModel}>link</Text.Link>
<P ellipsis>
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph
</P>
<Text.Link
fontStyle="italic"
weight="700"
handlerClick={this.onShowModel}
>
link
</Text.Link>
<P ellipsis="4">
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Paragraph
</P>
</div>
);
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
# 标题 （H1，H2，H3，H4，H5）
主标题
# 属性
| 成员 | 说明 | 类型 | 必须 | 默认值 | 版本 |
|---|---|---|---|---|---|
| fontStyle | 字体风格 | "italic" | "normal" | 否 | normal | -- |
| color | 字体颜色 | 支持的颜色 | 否 | "black" | -- |
| size | 字体大小 | "10"|"12"|"14"|"16"|"18"|"20"|"22" |"24"|"28"|"32"|"36"|"40"|"48"|"56"|"64" | 否 | -- | -- |
| weight | 字体粗细 | "bold"|"100"|"200"|"300"|"400" |"500"|"600"|"700"|"800"|"900" | 否 | -- | -- |
| className | 自定义 class 名 | String | 否 | -- | -- |
# 事件
| 事件名称 | 说明 | 回调参数 | 必须 | 版本 |
|---|---|---|---|---|
| handlerClick | 点击的回调 | () => void | 是 | -- |
# Text/Text.Link 文本
span 文本或者文本链接
# 属性
| 成员 | 说明 | 类型 | 必须 | 默认值 | 版本 |
|---|---|---|---|---|---|
| fontStyle | 字体风格 | "italic" | "normal" | 否 | normal | -- |
| color | 字体颜色 | 支持的颜色 | 否 | "black" | -- |
| size | 字体大小 | "10"|"12"|"14"|"16"|"18"|"20"|"22" |"24"|"28"|"32"|"36"|"40"|"48"|"56"|"64" | 否 | -- | -- |
| weight | 字体粗细 | "bold"|"100"|"200"|"300"|"400" |"500"|"600"|"700"|"800"|"900" | 否 | -- | -- |
| disabled | 禁用 | Boolean | 否 | false | -- |
| className | 自定义 class 名 | String | 否 | -- | -- |
# 事件
| 事件名称 | 说明 | 回调参数 | 必须 | 版本 |
|---|---|---|---|---|
| handlerClick | 点击的回调 | () => void | 是 | -- |
# P 段落
Paragraph 段落
# 属性
| 成员 | 说明 | 类型 | 必须 | 默认值 | 版本 |
|---|---|---|---|---|---|
| fontStyle | 字体风格 | "italic" | "normal" | 否 | normal | -- |
| color | 字体颜色 | 支持的颜色 | 否 | "black" | -- |
| size | 字体大小 | "10"|"12"|"14"|"16"|"18"|"20"|"22" |"24"|"28"|"32"|"36"|"40"|"48"|"56"|"64" | 否 | -- | -- |
| weight | 字体粗细 | "bold"|"100"|"200"|"300"|"400" |"500"|"600"|"700"|"800"|"900" | 否 | -- | -- |
| ellipsis | 自动溢出省略，设置对应的 string 省略行数 | Boolean|"1"|"2"|"3"|"4" |"5"|"6"|"7"|"8"|"9"|"10" | 否 | false | -- |
| className | 自定义 class 名 | String | 否 | -- | -- |
# 事件
| 事件名称 | 说明 | 回调参数 | 必须 | 版本 |
|---|---|---|---|---|
| handlerClick | 点击的回调 | () => void | 是 | -- |