# 引入
npm i sl-vue2-template
1
兼容 ie11 须知
需要先引入 babel-polyfill
npm install --save-dev babel-polyfill
1
import "babel-polyfill";
1
vue 文件使用须知
.vue 使用可能会遇到<Button.Primary>不存在的问题，这是因为 vue 文件不能这样使用组件 请按下面注入组件
import { Button } form 'sl-vue2-template'
export default {
components: {
ButtonPrimary: Button.Primary
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 颜色
颜色名与对应的值
.color {
primary-color: #c00000;
second-color: #cd2500;
success-color: #52c41a;
error-color: #ff4d4f;
warning-color: #faad14;
link-color: #c00000;
info-color: #1890ff;
white: #ffffff;
red: #ff1111;
light-red: #f4dfdf;
black: #000000;
light-black: #444444;
aux-black: #666666;
text: #000000d9;
aux-text: #898989;
grey: #b2b2b2;
light-grey: #cccccc;
blue: #3592f4;
success: #27d181;
waring: #ee7000;
error: #cc0000;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# Icon 图标
Icon 名
"Prompt" |
"Refresh" |
"Picture" |
"Search" |
"Share" |
"Scanning" |
"Security" |
"Sign Out" |
"Select" |
"Stop" |
"Select Circle" |
"Setting" |
"Survey" |
"Task" |
"Clock" |
"Phone" |
"Unlock" |
"User" |
"Upload" |
"Work" |
"Warning" |
"Zoom In" |
"Zoom Out" |
"Add Bold" |
"Arrow Left Bold" |
"Arrow Up Bold" |
"Close Bold" |
"Arrow Down Bold" |
"Minus Bold" |
"Arrow Right Bold" |
"Select Bold" |
"Arrow Up Filling" |
"Arrow Down Filling" |
"Arrow Left Filling" |
"Arrow Right Filling" |
"Caps Lock Filling" |
"Comment Filling" |
"Select Filling" |
"Clock Filling" |
"Close Filling" |
"Minus Filling" |
"Favorite Filling" |
"Help Filling" |
"History Filling" |
"Email Filling" |
"Edit Filling" |
"Notification Filling" |
"User Filling" |
"Setting Filling" |
"Work Filling" |
"Select Filling Circle" |
"Warning Filling" |
"Folder Filling" |
"Map Filling" |
"Prompt Filling" |
"Sort" |
"Add" |
"Add Circle" |
"Arrow Up Circle" |
"Arrow Right Circle" |
"Arrow Down" |
"Delete" |
"Arrow Right" |
"Browse" |
"Bottom" |
"Back" |
"Bad" |
"Arrow Double Left" |
"Arrow Left Circle" |
"Arrow Double Right" |
"Caps Lock" |
"Camera" |
"Chart Bar" |
"Attachment" |
"Code" |
"Close" |
"Select Square" |
"Calendar" |
"Comment" |
"Complete" |
"Customer Service" |
"Direction Down" |
"Direction Down Circle" |
"Direction Right" |
"Direction Up" |
"Direction Left" |
"Download" |
"Export" |
"Edit" |
"Browse Close" |
"Email" |
"Close Circle" |
"Favorite" |
"File Delete" |
"File Add" |
"Fabulous" |
"File" |
"Folder" |
"Good" |
"Home" |
"History" |
"Folder Open" |
"Forward" |
"Import" |
"Link" |
"Lock" |
"Map" |
"Menu" |
"Loading" |
"Help" |
"Minus Circle" |
"Modular" |
"Notification" |
"More" |
"Play" |
"Print" |
"Minus" |
"PDF";
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118