sun-form-v3 1.0.64 → 1.0.66

Sign up to get free protection for your applications and to get access to all the features.
Files changed (158) hide show
  1. package/package.json +8 -5
  2. package/src/App.vue +9 -0
  3. package/src/assets/font/YouSheBiaoTiHei-2.ttf +0 -0
  4. package/src/assets/font/demo.css +539 -0
  5. package/src/assets/font/demo_index.html +1200 -0
  6. package/src/assets/font/iconfont.css +191 -0
  7. package/src/assets/font/iconfont.js +1 -0
  8. package/src/assets/font/iconfont.json +317 -0
  9. package/src/assets/font/iconfont.ttf +0 -0
  10. package/src/assets/font/iconfont.woff +0 -0
  11. package/src/assets/font/iconfont.woff2 +0 -0
  12. package/src/assets/img/bg_footer.png +0 -0
  13. package/src/assets/img/bg_title.png +0 -0
  14. package/src/assets/img/file.png +0 -0
  15. package/src/assets/img/logo.png +0 -0
  16. package/src/assets/img/logo2.png +0 -0
  17. package/src/assets/img/logo22.png +0 -0
  18. package/src/assets/img/logo23.png +0 -0
  19. package/src/assets/img/logo3.png +0 -0
  20. package/src/assets/img//347/237/251/345/275/242@2x.png +0 -0
  21. package/src/assets/logo.svg +1 -0
  22. package/src/assets/styles/element/index.scss +15 -0
  23. package/src/assets/styles/index.css +3 -0
  24. package/src/components/a.js +14 -0
  25. package/src/components/aDesigner/config.vue +127 -0
  26. package/src/components/aDesigner/design.vue +21 -0
  27. package/src/components/aDesigner/designer.js +342 -0
  28. package/src/components/aDesigner/http.js +292 -0
  29. package/src/components/aDesigner/index.vue +144 -0
  30. package/src/components/aDesigner/panel.vue +144 -0
  31. package/src/components/aDesigner/show.vue +24 -0
  32. package/src/components/widgetCommonComps/commonApiConfig/index.vue +194 -0
  33. package/src/components/widgetCommonComps/commonCard/index.vue +36 -0
  34. package/src/components/widgetCommonComps/commonCodeEditor/editor.vue +219 -0
  35. package/src/components/widgetCommonComps/commonCodeEditor/modalEditor.vue +68 -0
  36. package/src/components/widgetCommonComps/commonCollapseCard/index.vue +10 -0
  37. package/src/components/widgetCommonComps/commonContainer/index.vue +95 -0
  38. package/src/components/widgetCommonComps/commonJsonInput/index.vue +59 -0
  39. package/src/components/widgetCommonComps/commonLabelContainer/index.vue +39 -0
  40. package/src/components/widgetCommonComps/commonSidetree/index.vue +61 -0
  41. package/src/components/widgetCommonComps/commonTypeInput/index.vue +75 -0
  42. package/src/components/widgetCommonComps/commonWidgetLabelContainer/index.vue +55 -0
  43. package/src/components/widgetCommonComps/index copy.js +17 -0
  44. package/src/components/widgetCommonComps/index.js +17 -0
  45. package/src/components/widgetConfigComps/config-input/index.vue +60 -0
  46. package/src/components/widgetConfigComps/index copy.js +13 -0
  47. package/src/components/widgetConfigComps/index.js +17 -0
  48. package/src/components/widgetShowComps/index.js +29 -0
  49. package/src/components/widgetShowComps/widget-form/index.vue +43 -0
  50. package/src/components/widgetShowComps/widget-homepage/index.vue +41 -0
  51. package/src/components/widgetShowComps/widget-input/index.vue +85 -0
  52. package/src/components/widgetShowComps/widget-select/index.vue +31 -0
  53. package/src/designer.js +342 -0
  54. package/src/http.js +292 -0
  55. package/src/index.js +24 -0
  56. package/src/index2.js +23 -0
  57. package/src/main.js +19 -0
  58. package/src/remark.js +708 -0
  59. package/src/testBtn.vue +11 -0
  60. package/src/testInput.vue +12 -0
  61. package/src/util/jsformat.js +568 -0
  62. package/src/widgetConfig.js +1112 -0
  63. package/dist/abap-DfvySaIJ.js +0 -1404
  64. package/dist/apex-B__0irD3.js +0 -332
  65. package/dist/assets/css.worker-OK053IOu.js +0 -84
  66. package/dist/assets/editor.worker-D9iUZyMP.js +0 -11
  67. package/dist/assets/html.worker-CL40hqKM.js +0 -458
  68. package/dist/assets/json.worker-6f9bhSHY.js +0 -42
  69. package/dist/assets/ts.worker-B6g3wjaE.js +0 -37021
  70. package/dist/azcli-CDMGhRmx.js +0 -74
  71. package/dist/bat-0Mk8aqzx.js +0 -106
  72. package/dist/bicep-BBi_I06Z.js +0 -108
  73. package/dist/cameligo-D0G_Zm6X.js +0 -180
  74. package/dist/clojure-o2ZKLeMp.js +0 -767
  75. package/dist/coffee-DOQff5VC.js +0 -238
  76. package/dist/cpp-CQGJnWhD.js +0 -395
  77. package/dist/csharp-C1jLsHl8.js +0 -332
  78. package/dist/csp-C_ttMQaW.js +0 -59
  79. package/dist/css-BC202kVV.js +0 -193
  80. package/dist/cssMode-BJ__hlmh.js +0 -1541
  81. package/dist/cypher-DwtEH7Fi.js +0 -269
  82. package/dist/dart-D9XknsP2.js +0 -287
  83. package/dist/dockerfile-DgsNjqqa.js +0 -136
  84. package/dist/ecl-BAMCHBl6.js +0 -462
  85. package/dist/elixir-CegIttP8.js +0 -575
  86. package/dist/favicon.ico +0 -0
  87. package/dist/flow9-9608t7UV.js +0 -148
  88. package/dist/freemarker2-CoLsQjW7.js +0 -995
  89. package/dist/fsharp-CCtt9-1_.js +0 -223
  90. package/dist/go-CGUIPbct.js +0 -224
  91. package/dist/graphql-BNRIFFIn.js +0 -157
  92. package/dist/handlebars-BX8CH7kP.js +0 -425
  93. package/dist/hcl-C__KLIXe.js +0 -189
  94. package/dist/html-CzRNAVFz.js +0 -314
  95. package/dist/htmlMode-D1rYdg3M.js +0 -1551
  96. package/dist/index-DmlyKQU2.js +0 -150
  97. package/dist/index2-CFFJfReU.js +0 -123480
  98. package/dist/ini-CeKYn_zA.js +0 -77
  99. package/dist/java-Dm24deQl.js +0 -238
  100. package/dist/javascript-D8qja2YK.js +0 -76
  101. package/dist/jsonMode-Ba3FSlH9.js +0 -1957
  102. package/dist/julia-BImNW7VE.js +0 -517
  103. package/dist/kotlin-BfE79GEb.js +0 -259
  104. package/dist/less-DglNOcaC.js +0 -168
  105. package/dist/lexon-BA0dRz9Q.js +0 -163
  106. package/dist/liquid-Dk9PEfYJ.js +0 -246
  107. package/dist/lua-DMkWzJcm.js +0 -168
  108. package/dist/m3-sA-5shO8.js +0 -216
  109. package/dist/markdown-OYRB1igA.js +0 -235
  110. package/dist/mdx-BYQIXNzg.js +0 -171
  111. package/dist/mips-rRzkJ_7G.js +0 -204
  112. package/dist/msdax-DoVJdUhd.js +0 -381
  113. package/dist/mysql-Ty44IHXo.js +0 -884
  114. package/dist/objective-c-VUfyhYrA.js +0 -189
  115. package/dist/pascal-DkASiYyw.js +0 -257
  116. package/dist/pascaligo-p-ELPlVO.js +0 -170
  117. package/dist/perl-Cjl1FxLZ.js +0 -632
  118. package/dist/pgsql-DjVenF7s.js +0 -857
  119. package/dist/php-CwvGzZOO.js +0 -506
  120. package/dist/pla-Br1iaBIV.js +0 -143
  121. package/dist/postiats-BaeP8zZY.js +0 -913
  122. package/dist/powerquery-CLCshuo8.js +0 -896
  123. package/dist/powershell-CZV50w5N.js +0 -245
  124. package/dist/protobuf-MV3XTewJ.js +0 -426
  125. package/dist/pug-DkDg4c4l.js +0 -408
  126. package/dist/python-nr__0oHi.js +0 -282
  127. package/dist/qsharp-BAtiKA97.js +0 -291
  128. package/dist/r-8ocrd-h-.js +0 -249
  129. package/dist/razor-BhxZaYa0.js +0 -556
  130. package/dist/redis-9sZiddxc.js +0 -308
  131. package/dist/redshift-DQfTOGC0.js +0 -815
  132. package/dist/restructuredtext-DXU-vkgr.js +0 -180
  133. package/dist/ruby-DotfqwMf.js +0 -517
  134. package/dist/rust-BIauJ5KN.js +0 -349
  135. package/dist/sb-CmWMvDEV.js +0 -121
  136. package/dist/scala-C81brEbk.js +0 -376
  137. package/dist/scheme-D0pcFz2x.js +0 -114
  138. package/dist/scss-BOdN2fGG.js +0 -268
  139. package/dist/shell-6E09eAkU.js +0 -227
  140. package/dist/solidity-CWStzA1K.js +0 -1373
  141. package/dist/sophia-76Sb6CWe.js +0 -205
  142. package/dist/sparql-BmZTkOWT.js +0 -207
  143. package/dist/sql-Cs9TBAW5.js +0 -859
  144. package/dist/st-B-rqE1Bu.js +0 -422
  145. package/dist/style.css +0 -1
  146. package/dist/sun-form-v3.es.js +0 -4
  147. package/dist/sun-form-v3.umd.js +0 -1908
  148. package/dist/swift-Btsj6YxQ.js +0 -318
  149. package/dist/systemverilog-B3RHBRa2.js +0 -582
  150. package/dist/tcl-Dpj776pn.js +0 -238
  151. package/dist/tsMode-B5V7dylO.js +0 -886
  152. package/dist/twig-Bb9JmBsE.js +0 -398
  153. package/dist/typescript-Cvb4NK72.js +0 -349
  154. package/dist/typespec-CDWeg3SU.js +0 -123
  155. package/dist/vb-DEXnYwEI.js +0 -378
  156. package/dist/wgsl-D602c1lx.js +0 -445
  157. package/dist/xml-D833w0Hk.js +0 -101
  158. package/dist/yaml-BEai5aLa.js +0 -212
package/src/assets/font/demo_index.html ADDED
@@ -0,0 +1,1200 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8"/>
5
+ <title>iconfont Demo</title>
6
+ <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
7
+ <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
8
+ <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
9
+ <link rel="stylesheet" href="demo.css">
10
+ <link rel="stylesheet" href="iconfont.css">
11
+ <script src="iconfont.js"></script>
12
+ <!-- jQuery -->
13
+ <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
14
+ <!-- 代码高亮 -->
15
+ <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
16
+ <style>
17
+ .main .logo {
18
+ margin-top: 0;
19
+ height: auto;
20
+ }
21
+
22
+ .main .logo a {
23
+ display: flex;
24
+ align-items: center;
25
+ }
26
+
27
+ .main .logo .sub-title {
28
+ margin-left: 0.5em;
29
+ font-size: 22px;
30
+ color: #fff;
31
+ background: linear-gradient(-45deg, #3967FF, #B500FE);
32
+ -webkit-background-clip: text;
33
+ -webkit-text-fill-color: transparent;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body>
38
+ <div class="main">
39
+ <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
40
+ <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
41
+
42
+ </a></h1>
43
+ <div class="nav-tabs">
44
+ <ul id="tabs" class="dib-box">
45
+ <li class="dib active"><span>Unicode</span></li>
46
+ <li class="dib"><span>Font class</span></li>
47
+ <li class="dib"><span>Symbol</span></li>
48
+ </ul>
49
+
50
+ <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3876170" target="_blank" class="nav-more">查看项目</a>
51
+
52
+ </div>
53
+ <div class="tab-container">
54
+ <div class="content unicode" style="display: block;">
55
+ <ul class="icon_lists dib-box">
56
+
57
+ <li class="dib">
58
+ <span class="icon iconfont">&#xe600;</span>
59
+ <div class="name">撤销</div>
60
+ <div class="code-name">&amp;#xe600;</div>
61
+ </li>
62
+
63
+ <li class="dib">
64
+ <span class="icon iconfont">&#xe602;</span>
65
+ <div class="name">重做</div>
66
+ <div class="code-name">&amp;#xe602;</div>
67
+ </li>
68
+
69
+ <li class="dib">
70
+ <span class="icon iconfont">&#xe66f;</span>
71
+ <div class="name">D-component3</div>
72
+ <div class="code-name">&amp;#xe66f;</div>
73
+ </li>
74
+
75
+ <li class="dib">
76
+ <span class="icon iconfont">&#xe601;</span>
77
+ <div class="name">大纲</div>
78
+ <div class="code-name">&amp;#xe601;</div>
79
+ </li>
80
+
81
+ <li class="dib">
82
+ <span class="icon iconfont">&#xe7d4;</span>
83
+ <div class="name">软件源码</div>
84
+ <div class="code-name">&amp;#xe7d4;</div>
85
+ </li>
86
+
87
+ <li class="dib">
88
+ <span class="icon iconfont">&#xe60e;</span>
89
+ <div class="name">form</div>
90
+ <div class="code-name">&amp;#xe60e;</div>
91
+ </li>
92
+
93
+ <li class="dib">
94
+ <span class="icon iconfont">&#xe83f;</span>
95
+ <div class="name">验证码</div>
96
+ <div class="code-name">&amp;#xe83f;</div>
97
+ </li>
98
+
99
+ <li class="dib">
100
+ <span class="icon iconfont">&#xe67f;</span>
101
+ <div class="name">图片</div>
102
+ <div class="code-name">&amp;#xe67f;</div>
103
+ </li>
104
+
105
+ <li class="dib">
106
+ <span class="icon iconfont">&#xec72;</span>
107
+ <div class="name">告警实心</div>
108
+ <div class="code-name">&amp;#xec72;</div>
109
+ </li>
110
+
111
+ <li class="dib">
112
+ <span class="icon iconfont">&#xe60d;</span>
113
+ <div class="name">容器</div>
114
+ <div class="code-name">&amp;#xe60d;</div>
115
+ </li>
116
+
117
+ <li class="dib">
118
+ <span class="icon iconfont">&#xe74e;</span>
119
+ <div class="name">html5</div>
120
+ <div class="code-name">&amp;#xe74e;</div>
121
+ </li>
122
+
123
+ <li class="dib">
124
+ <span class="icon iconfont">&#xe891;</span>
125
+ <div class="name">transfer</div>
126
+ <div class="code-name">&amp;#xe891;</div>
127
+ </li>
128
+
129
+ <li class="dib">
130
+ <span class="icon iconfont">&#xe73b;</span>
131
+ <div class="name">line-file word（word文档）-02</div>
132
+ <div class="code-name">&amp;#xe73b;</div>
133
+ </li>
134
+
135
+ <li class="dib">
136
+ <span class="icon iconfont">&#xe648;</span>
137
+ <div class="name">地图</div>
138
+ <div class="code-name">&amp;#xe648;</div>
139
+ </li>
140
+
141
+ <li class="dib">
142
+ <span class="icon iconfont">&#xe629;</span>
143
+ <div class="name">tree-table</div>
144
+ <div class="code-name">&amp;#xe629;</div>
145
+ </li>
146
+
147
+ <li class="dib">
148
+ <span class="icon iconfont">&#xe70f;</span>
149
+ <div class="name">Timeline-1</div>
150
+ <div class="code-name">&amp;#xe70f;</div>
151
+ </li>
152
+
153
+ <li class="dib">
154
+ <span class="icon iconfont">&#xe746;</span>
155
+ <div class="name">find-in-page</div>
156
+ <div class="code-name">&amp;#xe746;</div>
157
+ </li>
158
+
159
+ <li class="dib">
160
+ <span class="icon iconfont">&#xe62c;</span>
161
+ <div class="name">星星</div>
162
+ <div class="code-name">&amp;#xe62c;</div>
163
+ </li>
164
+
165
+ <li class="dib">
166
+ <span class="icon iconfont">&#xe76d;</span>
167
+ <div class="name">card</div>
168
+ <div class="code-name">&amp;#xe76d;</div>
169
+ </li>
170
+
171
+ <li class="dib">
172
+ <span class="icon iconfont">&#xe81c;</span>
173
+ <div class="name">radio-checked</div>
174
+ <div class="code-name">&amp;#xe81c;</div>
175
+ </li>
176
+
177
+ <li class="dib">
178
+ <span class="icon iconfont">&#xe7b3;</span>
179
+ <div class="name">radio-checked</div>
180
+ <div class="code-name">&amp;#xe7b3;</div>
181
+ </li>
182
+
183
+ <li class="dib">
184
+ <span class="icon iconfont">&#xe642;</span>
185
+ <div class="name">select</div>
186
+ <div class="code-name">&amp;#xe642;</div>
187
+ </li>
188
+
189
+ <li class="dib">
190
+ <span class="icon iconfont">&#xe63b;</span>
191
+ <div class="name">institue_time</div>
192
+ <div class="code-name">&amp;#xe63b;</div>
193
+ </li>
194
+
195
+ <li class="dib">
196
+ <span class="icon iconfont">&#xe619;</span>
197
+ <div class="name">时钟</div>
198
+ <div class="code-name">&amp;#xe619;</div>
199
+ </li>
200
+
201
+ <li class="dib">
202
+ <span class="icon iconfont">&#xe6df;</span>
203
+ <div class="name">tab</div>
204
+ <div class="code-name">&amp;#xe6df;</div>
205
+ </li>
206
+
207
+ <li class="dib">
208
+ <span class="icon iconfont">&#xe628;</span>
209
+ <div class="name">开关</div>
210
+ <div class="code-name">&amp;#xe628;</div>
211
+ </li>
212
+
213
+ <li class="dib">
214
+ <span class="icon iconfont">&#xe615;</span>
215
+ <div class="name">checkbox-f</div>
216
+ <div class="code-name">&amp;#xe615;</div>
217
+ </li>
218
+
219
+ <li class="dib">
220
+ <span class="icon iconfont">&#xea04;</span>
221
+ <div class="name">地图,手指,点击,触摸</div>
222
+ <div class="code-name">&amp;#xea04;</div>
223
+ </li>
224
+
225
+ <li class="dib">
226
+ <span class="icon iconfont">&#xe609;</span>
227
+ <div class="name">daterange-outlined</div>
228
+ <div class="code-name">&amp;#xe609;</div>
229
+ </li>
230
+
231
+ <li class="dib">
232
+ <span class="icon iconfont">&#xe62b;</span>
233
+ <div class="name">标题</div>
234
+ <div class="code-name">&amp;#xe62b;</div>
235
+ </li>
236
+
237
+ <li class="dib">
238
+ <span class="icon iconfont">&#xe671;</span>
239
+ <div class="name">符号-日期区间</div>
240
+ <div class="code-name">&amp;#xe671;</div>
241
+ </li>
242
+
243
+ <li class="dib">
244
+ <span class="icon iconfont">&#xe74a;</span>
245
+ <div class="name">接口</div>
246
+ <div class="code-name">&amp;#xe74a;</div>
247
+ </li>
248
+
249
+ <li class="dib">
250
+ <span class="icon iconfont">&#xe6e4;</span>
251
+ <div class="name">大标题</div>
252
+ <div class="code-name">&amp;#xe6e4;</div>
253
+ </li>
254
+
255
+ <li class="dib">
256
+ <span class="icon iconfont">&#xe61e;</span>
257
+ <div class="name">上传</div>
258
+ <div class="code-name">&amp;#xe61e;</div>
259
+ </li>
260
+
261
+ <li class="dib">
262
+ <span class="icon iconfont">&#xe6a6;</span>
263
+ <div class="name">综测表单设置</div>
264
+ <div class="code-name">&amp;#xe6a6;</div>
265
+ </li>
266
+
267
+ <li class="dib">
268
+ <span class="icon iconfont">&#xe638;</span>
269
+ <div class="name">分割线</div>
270
+ <div class="code-name">&amp;#xe638;</div>
271
+ </li>
272
+
273
+ <li class="dib">
274
+ <span class="icon iconfont">&#xe61c;</span>
275
+ <div class="name">单行文本</div>
276
+ <div class="code-name">&amp;#xe61c;</div>
277
+ </li>
278
+
279
+ <li class="dib">
280
+ <span class="icon iconfont">&#xe61d;</span>
281
+ <div class="name">多选框</div>
282
+ <div class="code-name">&amp;#xe61d;</div>
283
+ </li>
284
+
285
+ <li class="dib">
286
+ <span class="icon iconfont">&#xe620;</span>
287
+ <div class="name">多行文本</div>
288
+ <div class="code-name">&amp;#xe620;</div>
289
+ </li>
290
+
291
+ <li class="dib">
292
+ <span class="icon iconfont">&#xe639;</span>
293
+ <div class="name">表格</div>
294
+ <div class="code-name">&amp;#xe639;</div>
295
+ </li>
296
+
297
+ <li class="dib">
298
+ <span class="icon iconfont">&#xe63c;</span>
299
+ <div class="name">弹窗</div>
300
+ <div class="code-name">&amp;#xe63c;</div>
301
+ </li>
302
+
303
+ <li class="dib">
304
+ <span class="icon iconfont">&#xe64e;</span>
305
+ <div class="name">date</div>
306
+ <div class="code-name">&amp;#xe64e;</div>
307
+ </li>
308
+
309
+ <li class="dib">
310
+ <span class="icon iconfont">&#xe655;</span>
311
+ <div class="name">富文本编辑器_缩进</div>
312
+ <div class="code-name">&amp;#xe655;</div>
313
+ </li>
314
+
315
+ <li class="dib">
316
+ <span class="icon iconfont">&#xeb94;</span>
317
+ <div class="name">表单组件-表格</div>
318
+ <div class="code-name">&amp;#xeb94;</div>
319
+ </li>
320
+
321
+ </ul>
322
+ <div class="article markdown">
323
+ <h2 id="unicode-">Unicode 引用</h2>
324
+ <hr>
325
+
326
+ <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
327
+ <ul>
328
+ <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
329
+ <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
330
+ </ul>
331
+ <blockquote>
332
+ <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
333
+ </blockquote>
334
+ <p>Unicode 使用步骤如下：</p>
335
+ <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
336
+ <pre><code class="language-css"
337
+ >@font-face {
338
+ font-family: 'iconfont';
339
+ src: url('iconfont.woff2?t=1717897229422') format('woff2'),
340
+ url('iconfont.woff?t=1717897229422') format('woff'),
341
+ url('iconfont.ttf?t=1717897229422') format('truetype');
342
+ }
343
+ </code></pre>
344
+ <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
345
+ <pre><code class="language-css"
346
+ >.iconfont {
347
+ font-family: "iconfont" !important;
348
+ font-size: 16px;
349
+ font-style: normal;
350
+ -webkit-font-smoothing: antialiased;
351
+ -moz-osx-font-smoothing: grayscale;
352
+ }
353
+ </code></pre>
354
+ <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
355
+ <pre>
356
+ <code class="language-html"
357
+ >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
358
+ </code></pre>
359
+ <blockquote>
360
+ <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
361
+ </blockquote>
362
+ </div>
363
+ </div>
364
+ <div class="content font-class">
365
+ <ul class="icon_lists dib-box">
366
+
367
+ <li class="dib">
368
+ <span class="icon iconfont icon-xianghou"></span>
369
+ <div class="name">
370
+ 撤销
371
+ </div>
372
+ <div class="code-name">.icon-xianghou
373
+ </div>
374
+ </li>
375
+
376
+ <li class="dib">
377
+ <span class="icon iconfont icon-xiangqian"></span>
378
+ <div class="name">
379
+ 重做
380
+ </div>
381
+ <div class="code-name">.icon-xiangqian
382
+ </div>
383
+ </li>
384
+
385
+ <li class="dib">
386
+ <span class="icon iconfont icon-zujian"></span>
387
+ <div class="name">
388
+ D-component3
389
+ </div>
390
+ <div class="code-name">.icon-zujian
391
+ </div>
392
+ </li>
393
+
394
+ <li class="dib">
395
+ <span class="icon iconfont icon-dagang"></span>
396
+ <div class="name">
397
+ 大纲
398
+ </div>
399
+ <div class="code-name">.icon-dagang
400
+ </div>
401
+ </li>
402
+
403
+ <li class="dib">
404
+ <span class="icon iconfont icon-yuanma"></span>
405
+ <div class="name">
406
+ 软件源码
407
+ </div>
408
+ <div class="code-name">.icon-yuanma
409
+ </div>
410
+ </li>
411
+
412
+ <li class="dib">
413
+ <span class="icon iconfont icon-form"></span>
414
+ <div class="name">
415
+ form
416
+ </div>
417
+ <div class="code-name">.icon-form
418
+ </div>
419
+ </li>
420
+
421
+ <li class="dib">
422
+ <span class="icon iconfont icon-checkCode"></span>
423
+ <div class="name">
424
+ 验证码
425
+ </div>
426
+ <div class="code-name">.icon-checkCode
427
+ </div>
428
+ </li>
429
+
430
+ <li class="dib">
431
+ <span class="icon iconfont icon-image"></span>
432
+ <div class="name">
433
+ 图片
434
+ </div>
435
+ <div class="code-name">.icon-image
436
+ </div>
437
+ </li>
438
+
439
+ <li class="dib">
440
+ <span class="icon iconfont icon-alert"></span>
441
+ <div class="name">
442
+ 告警实心
443
+ </div>
444
+ <div class="code-name">.icon-alert
445
+ </div>
446
+ </li>
447
+
448
+ <li class="dib">
449
+ <span class="icon iconfont icon-div"></span>
450
+ <div class="name">
451
+ 容器
452
+ </div>
453
+ <div class="code-name">.icon-div
454
+ </div>
455
+ </li>
456
+
457
+ <li class="dib">
458
+ <span class="icon iconfont icon-html"></span>
459
+ <div class="name">
460
+ html5
461
+ </div>
462
+ <div class="code-name">.icon-html
463
+ </div>
464
+ </li>
465
+
466
+ <li class="dib">
467
+ <span class="icon iconfont icon-transfer"></span>
468
+ <div class="name">
469
+ transfer
470
+ </div>
471
+ <div class="code-name">.icon-transfer
472
+ </div>
473
+ </li>
474
+
475
+ <li class="dib">
476
+ <span class="icon iconfont icon-editor"></span>
477
+ <div class="name">
478
+ line-file word（word文档）-02
479
+ </div>
480
+ <div class="code-name">.icon-editor
481
+ </div>
482
+ </li>
483
+
484
+ <li class="dib">
485
+ <span class="icon iconfont icon-location"></span>
486
+ <div class="name">
487
+ 地图
488
+ </div>
489
+ <div class="code-name">.icon-location
490
+ </div>
491
+ </li>
492
+
493
+ <li class="dib">
494
+ <span class="icon iconfont icon-tree"></span>
495
+ <div class="name">
496
+ tree-table
497
+ </div>
498
+ <div class="code-name">.icon-tree
499
+ </div>
500
+ </li>
501
+
502
+ <li class="dib">
503
+ <span class="icon iconfont icon-timeline"></span>
504
+ <div class="name">
505
+ Timeline-1
506
+ </div>
507
+ <div class="code-name">.icon-timeline
508
+ </div>
509
+ </li>
510
+
511
+ <li class="dib">
512
+ <span class="icon iconfont icon-iframe"></span>
513
+ <div class="name">
514
+ find-in-page
515
+ </div>
516
+ <div class="code-name">.icon-iframe
517
+ </div>
518
+ </li>
519
+
520
+ <li class="dib">
521
+ <span class="icon iconfont icon-rate"></span>
522
+ <div class="name">
523
+ 星星
524
+ </div>
525
+ <div class="code-name">.icon-rate
526
+ </div>
527
+ </li>
528
+
529
+ <li class="dib">
530
+ <span class="icon iconfont icon-card"></span>
531
+ <div class="name">
532
+ card
533
+ </div>
534
+ <div class="code-name">.icon-card
535
+ </div>
536
+ </li>
537
+
538
+ <li class="dib">
539
+ <span class="icon iconfont icon-radio"></span>
540
+ <div class="name">
541
+ radio-checked
542
+ </div>
543
+ <div class="code-name">.icon-radio
544
+ </div>
545
+ </li>
546
+
547
+ <li class="dib">
548
+ <span class="icon iconfont icon-radiochecked1"></span>
549
+ <div class="name">
550
+ radio-checked
551
+ </div>
552
+ <div class="code-name">.icon-radiochecked1
553
+ </div>
554
+ </li>
555
+
556
+ <li class="dib">
557
+ <span class="icon iconfont icon-select"></span>
558
+ <div class="name">
559
+ select
560
+ </div>
561
+ <div class="code-name">.icon-select
562
+ </div>
563
+ </li>
564
+
565
+ <li class="dib">
566
+ <span class="icon iconfont icon-time"></span>
567
+ <div class="name">
568
+ institue_time
569
+ </div>
570
+ <div class="code-name">.icon-time
571
+ </div>
572
+ </li>
573
+
574
+ <li class="dib">
575
+ <span class="icon iconfont icon-timerange"></span>
576
+ <div class="name">
577
+ 时钟
578
+ </div>
579
+ <div class="code-name">.icon-timerange
580
+ </div>
581
+ </li>
582
+
583
+ <li class="dib">
584
+ <span class="icon iconfont icon-tabs"></span>
585
+ <div class="name">
586
+ tab
587
+ </div>
588
+ <div class="code-name">.icon-tabs
589
+ </div>
590
+ </li>
591
+
592
+ <li class="dib">
593
+ <span class="icon iconfont icon-switch"></span>
594
+ <div class="name">
595
+ 开关
596
+ </div>
597
+ <div class="code-name">.icon-switch
598
+ </div>
599
+ </li>
600
+
601
+ <li class="dib">
602
+ <span class="icon iconfont icon-checkbox"></span>
603
+ <div class="name">
604
+ checkbox-f
605
+ </div>
606
+ <div class="code-name">.icon-checkbox
607
+ </div>
608
+ </li>
609
+
610
+ <li class="dib">
611
+ <span class="icon iconfont icon-button"></span>
612
+ <div class="name">
613
+ 地图,手指,点击,触摸
614
+ </div>
615
+ <div class="code-name">.icon-button
616
+ </div>
617
+ </li>
618
+
619
+ <li class="dib">
620
+ <span class="icon iconfont icon-daterange"></span>
621
+ <div class="name">
622
+ daterange-outlined
623
+ </div>
624
+ <div class="code-name">.icon-daterange
625
+ </div>
626
+ </li>
627
+
628
+ <li class="dib">
629
+ <span class="icon iconfont icon-title"></span>
630
+ <div class="name">
631
+ 标题
632
+ </div>
633
+ <div class="code-name">.icon-title
634
+ </div>
635
+ </li>
636
+
637
+ <li class="dib">
638
+ <span class="icon iconfont icon-riqiqujian"></span>
639
+ <div class="name">
640
+ 符号-日期区间
641
+ </div>
642
+ <div class="code-name">.icon-riqiqujian
643
+ </div>
644
+ </li>
645
+
646
+ <li class="dib">
647
+ <span class="icon iconfont icon-service"></span>
648
+ <div class="name">
649
+ 接口
650
+ </div>
651
+ <div class="code-name">.icon-service
652
+ </div>
653
+ </li>
654
+
655
+ <li class="dib">
656
+ <span class="icon iconfont icon-biaoti2"></span>
657
+ <div class="name">
658
+ 大标题
659
+ </div>
660
+ <div class="code-name">.icon-biaoti2
661
+ </div>
662
+ </li>
663
+
664
+ <li class="dib">
665
+ <span class="icon iconfont icon-file"></span>
666
+ <div class="name">
667
+ 上传
668
+ </div>
669
+ <div class="code-name">.icon-file
670
+ </div>
671
+ </li>
672
+
673
+ <li class="dib">
674
+ <span class="icon iconfont icon-grid"></span>
675
+ <div class="name">
676
+ 综测表单设置
677
+ </div>
678
+ <div class="code-name">.icon-grid
679
+ </div>
680
+ </li>
681
+
682
+ <li class="dib">
683
+ <span class="icon iconfont icon-divider"></span>
684
+ <div class="name">
685
+ 分割线
686
+ </div>
687
+ <div class="code-name">.icon-divider
688
+ </div>
689
+ </li>
690
+
691
+ <li class="dib">
692
+ <span class="icon iconfont icon-input"></span>
693
+ <div class="name">
694
+ 单行文本
695
+ </div>
696
+ <div class="code-name">.icon-input
697
+ </div>
698
+ </li>
699
+
700
+ <li class="dib">
701
+ <span class="icon iconfont icon-selects"></span>
702
+ <div class="name">
703
+ 多选框
704
+ </div>
705
+ <div class="code-name">.icon-selects
706
+ </div>
707
+ </li>
708
+
709
+ <li class="dib">
710
+ <span class="icon iconfont icon-textarea"></span>
711
+ <div class="name">
712
+ 多行文本
713
+ </div>
714
+ <div class="code-name">.icon-textarea
715
+ </div>
716
+ </li>
717
+
718
+ <li class="dib">
719
+ <span class="icon iconfont icon-datatable"></span>
720
+ <div class="name">
721
+ 表格
722
+ </div>
723
+ <div class="code-name">.icon-datatable
724
+ </div>
725
+ </li>
726
+
727
+ <li class="dib">
728
+ <span class="icon iconfont icon-modal"></span>
729
+ <div class="name">
730
+ 弹窗
731
+ </div>
732
+ <div class="code-name">.icon-modal
733
+ </div>
734
+ </li>
735
+
736
+ <li class="dib">
737
+ <span class="icon iconfont icon-date"></span>
738
+ <div class="name">
739
+ date
740
+ </div>
741
+ <div class="code-name">.icon-date
742
+ </div>
743
+ </li>
744
+
745
+ <li class="dib">
746
+ <span class="icon iconfont icon-codeEditor"></span>
747
+ <div class="name">
748
+ 富文本编辑器_缩进
749
+ </div>
750
+ <div class="code-name">.icon-codeEditor
751
+ </div>
752
+ </li>
753
+
754
+ <li class="dib">
755
+ <span class="icon iconfont icon-biaodanzujian-biaoge"></span>
756
+ <div class="name">
757
+ 表单组件-表格
758
+ </div>
759
+ <div class="code-name">.icon-biaodanzujian-biaoge
760
+ </div>
761
+ </li>
762
+
763
+ </ul>
764
+ <div class="article markdown">
765
+ <h2 id="font-class-">font-class 引用</h2>
766
+ <hr>
767
+
768
+ <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
769
+ <p>与 Unicode 使用方式相比，具有如下特点：</p>
770
+ <ul>
771
+ <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
772
+ <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
773
+ </ul>
774
+ <p>使用步骤如下：</p>
775
+ <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
776
+ <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
777
+ </code></pre>
778
+ <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
779
+ <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
780
+ </code></pre>
781
+ <blockquote>
782
+ <p>"
783
+ iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
784
+ </blockquote>
785
+ </div>
786
+ </div>
787
+ <div class="content symbol">
788
+ <ul class="icon_lists dib-box">
789
+
790
+ <li class="dib">
791
+ <svg class="icon svg-icon" aria-hidden="true">
792
+ <use xlink:href="#icon-xianghou"></use>
793
+ </svg>
794
+ <div class="name">撤销</div>
795
+ <div class="code-name">#icon-xianghou</div>
796
+ </li>
797
+
798
+ <li class="dib">
799
+ <svg class="icon svg-icon" aria-hidden="true">
800
+ <use xlink:href="#icon-xiangqian"></use>
801
+ </svg>
802
+ <div class="name">重做</div>
803
+ <div class="code-name">#icon-xiangqian</div>
804
+ </li>
805
+
806
+ <li class="dib">
807
+ <svg class="icon svg-icon" aria-hidden="true">
808
+ <use xlink:href="#icon-zujian"></use>
809
+ </svg>
810
+ <div class="name">D-component3</div>
811
+ <div class="code-name">#icon-zujian</div>
812
+ </li>
813
+
814
+ <li class="dib">
815
+ <svg class="icon svg-icon" aria-hidden="true">
816
+ <use xlink:href="#icon-dagang"></use>
817
+ </svg>
818
+ <div class="name">大纲</div>
819
+ <div class="code-name">#icon-dagang</div>
820
+ </li>
821
+
822
+ <li class="dib">
823
+ <svg class="icon svg-icon" aria-hidden="true">
824
+ <use xlink:href="#icon-yuanma"></use>
825
+ </svg>
826
+ <div class="name">软件源码</div>
827
+ <div class="code-name">#icon-yuanma</div>
828
+ </li>
829
+
830
+ <li class="dib">
831
+ <svg class="icon svg-icon" aria-hidden="true">
832
+ <use xlink:href="#icon-form"></use>
833
+ </svg>
834
+ <div class="name">form</div>
835
+ <div class="code-name">#icon-form</div>
836
+ </li>
837
+
838
+ <li class="dib">
839
+ <svg class="icon svg-icon" aria-hidden="true">
840
+ <use xlink:href="#icon-checkCode"></use>
841
+ </svg>
842
+ <div class="name">验证码</div>
843
+ <div class="code-name">#icon-checkCode</div>
844
+ </li>
845
+
846
+ <li class="dib">
847
+ <svg class="icon svg-icon" aria-hidden="true">
848
+ <use xlink:href="#icon-image"></use>
849
+ </svg>
850
+ <div class="name">图片</div>
851
+ <div class="code-name">#icon-image</div>
852
+ </li>
853
+
854
+ <li class="dib">
855
+ <svg class="icon svg-icon" aria-hidden="true">
856
+ <use xlink:href="#icon-alert"></use>
857
+ </svg>
858
+ <div class="name">告警实心</div>
859
+ <div class="code-name">#icon-alert</div>
860
+ </li>
861
+
862
+ <li class="dib">
863
+ <svg class="icon svg-icon" aria-hidden="true">
864
+ <use xlink:href="#icon-div"></use>
865
+ </svg>
866
+ <div class="name">容器</div>
867
+ <div class="code-name">#icon-div</div>
868
+ </li>
869
+
870
+ <li class="dib">
871
+ <svg class="icon svg-icon" aria-hidden="true">
872
+ <use xlink:href="#icon-html"></use>
873
+ </svg>
874
+ <div class="name">html5</div>
875
+ <div class="code-name">#icon-html</div>
876
+ </li>
877
+
878
+ <li class="dib">
879
+ <svg class="icon svg-icon" aria-hidden="true">
880
+ <use xlink:href="#icon-transfer"></use>
881
+ </svg>
882
+ <div class="name">transfer</div>
883
+ <div class="code-name">#icon-transfer</div>
884
+ </li>
885
+
886
+ <li class="dib">
887
+ <svg class="icon svg-icon" aria-hidden="true">
888
+ <use xlink:href="#icon-editor"></use>
889
+ </svg>
890
+ <div class="name">line-file word（word文档）-02</div>
891
+ <div class="code-name">#icon-editor</div>
892
+ </li>
893
+
894
+ <li class="dib">
895
+ <svg class="icon svg-icon" aria-hidden="true">
896
+ <use xlink:href="#icon-location"></use>
897
+ </svg>
898
+ <div class="name">地图</div>
899
+ <div class="code-name">#icon-location</div>
900
+ </li>
901
+
902
+ <li class="dib">
903
+ <svg class="icon svg-icon" aria-hidden="true">
904
+ <use xlink:href="#icon-tree"></use>
905
+ </svg>
906
+ <div class="name">tree-table</div>
907
+ <div class="code-name">#icon-tree</div>
908
+ </li>
909
+
910
+ <li class="dib">
911
+ <svg class="icon svg-icon" aria-hidden="true">
912
+ <use xlink:href="#icon-timeline"></use>
913
+ </svg>
914
+ <div class="name">Timeline-1</div>
915
+ <div class="code-name">#icon-timeline</div>
916
+ </li>
917
+
918
+ <li class="dib">
919
+ <svg class="icon svg-icon" aria-hidden="true">
920
+ <use xlink:href="#icon-iframe"></use>
921
+ </svg>
922
+ <div class="name">find-in-page</div>
923
+ <div class="code-name">#icon-iframe</div>
924
+ </li>
925
+
926
+ <li class="dib">
927
+ <svg class="icon svg-icon" aria-hidden="true">
928
+ <use xlink:href="#icon-rate"></use>
929
+ </svg>
930
+ <div class="name">星星</div>
931
+ <div class="code-name">#icon-rate</div>
932
+ </li>
933
+
934
+ <li class="dib">
935
+ <svg class="icon svg-icon" aria-hidden="true">
936
+ <use xlink:href="#icon-card"></use>
937
+ </svg>
938
+ <div class="name">card</div>
939
+ <div class="code-name">#icon-card</div>
940
+ </li>
941
+
942
+ <li class="dib">
943
+ <svg class="icon svg-icon" aria-hidden="true">
944
+ <use xlink:href="#icon-radio"></use>
945
+ </svg>
946
+ <div class="name">radio-checked</div>
947
+ <div class="code-name">#icon-radio</div>
948
+ </li>
949
+
950
+ <li class="dib">
951
+ <svg class="icon svg-icon" aria-hidden="true">
952
+ <use xlink:href="#icon-radiochecked1"></use>
953
+ </svg>
954
+ <div class="name">radio-checked</div>
955
+ <div class="code-name">#icon-radiochecked1</div>
956
+ </li>
957
+
958
+ <li class="dib">
959
+ <svg class="icon svg-icon" aria-hidden="true">
960
+ <use xlink:href="#icon-select"></use>
961
+ </svg>
962
+ <div class="name">select</div>
963
+ <div class="code-name">#icon-select</div>
964
+ </li>
965
+
966
+ <li class="dib">
967
+ <svg class="icon svg-icon" aria-hidden="true">
968
+ <use xlink:href="#icon-time"></use>
969
+ </svg>
970
+ <div class="name">institue_time</div>
971
+ <div class="code-name">#icon-time</div>
972
+ </li>
973
+
974
+ <li class="dib">
975
+ <svg class="icon svg-icon" aria-hidden="true">
976
+ <use xlink:href="#icon-timerange"></use>
977
+ </svg>
978
+ <div class="name">时钟</div>
979
+ <div class="code-name">#icon-timerange</div>
980
+ </li>
981
+
982
+ <li class="dib">
983
+ <svg class="icon svg-icon" aria-hidden="true">
984
+ <use xlink:href="#icon-tabs"></use>
985
+ </svg>
986
+ <div class="name">tab</div>
987
+ <div class="code-name">#icon-tabs</div>
988
+ </li>
989
+
990
+ <li class="dib">
991
+ <svg class="icon svg-icon" aria-hidden="true">
992
+ <use xlink:href="#icon-switch"></use>
993
+ </svg>
994
+ <div class="name">开关</div>
995
+ <div class="code-name">#icon-switch</div>
996
+ </li>
997
+
998
+ <li class="dib">
999
+ <svg class="icon svg-icon" aria-hidden="true">
1000
+ <use xlink:href="#icon-checkbox"></use>
1001
+ </svg>
1002
+ <div class="name">checkbox-f</div>
1003
+ <div class="code-name">#icon-checkbox</div>
1004
+ </li>
1005
+
1006
+ <li class="dib">
1007
+ <svg class="icon svg-icon" aria-hidden="true">
1008
+ <use xlink:href="#icon-button"></use>
1009
+ </svg>
1010
+ <div class="name">地图,手指,点击,触摸</div>
1011
+ <div class="code-name">#icon-button</div>
1012
+ </li>
1013
+
1014
+ <li class="dib">
1015
+ <svg class="icon svg-icon" aria-hidden="true">
1016
+ <use xlink:href="#icon-daterange"></use>
1017
+ </svg>
1018
+ <div class="name">daterange-outlined</div>
1019
+ <div class="code-name">#icon-daterange</div>
1020
+ </li>
1021
+
1022
+ <li class="dib">
1023
+ <svg class="icon svg-icon" aria-hidden="true">
1024
+ <use xlink:href="#icon-title"></use>
1025
+ </svg>
1026
+ <div class="name">标题</div>
1027
+ <div class="code-name">#icon-title</div>
1028
+ </li>
1029
+
1030
+ <li class="dib">
1031
+ <svg class="icon svg-icon" aria-hidden="true">
1032
+ <use xlink:href="#icon-riqiqujian"></use>
1033
+ </svg>
1034
+ <div class="name">符号-日期区间</div>
1035
+ <div class="code-name">#icon-riqiqujian</div>
1036
+ </li>
1037
+
1038
+ <li class="dib">
1039
+ <svg class="icon svg-icon" aria-hidden="true">
1040
+ <use xlink:href="#icon-service"></use>
1041
+ </svg>
1042
+ <div class="name">接口</div>
1043
+ <div class="code-name">#icon-service</div>
1044
+ </li>
1045
+
1046
+ <li class="dib">
1047
+ <svg class="icon svg-icon" aria-hidden="true">
1048
+ <use xlink:href="#icon-biaoti2"></use>
1049
+ </svg>
1050
+ <div class="name">大标题</div>
1051
+ <div class="code-name">#icon-biaoti2</div>
1052
+ </li>
1053
+
1054
+ <li class="dib">
1055
+ <svg class="icon svg-icon" aria-hidden="true">
1056
+ <use xlink:href="#icon-file"></use>
1057
+ </svg>
1058
+ <div class="name">上传</div>
1059
+ <div class="code-name">#icon-file</div>
1060
+ </li>
1061
+
1062
+ <li class="dib">
1063
+ <svg class="icon svg-icon" aria-hidden="true">
1064
+ <use xlink:href="#icon-grid"></use>
1065
+ </svg>
1066
+ <div class="name">综测表单设置</div>
1067
+ <div class="code-name">#icon-grid</div>
1068
+ </li>
1069
+
1070
+ <li class="dib">
1071
+ <svg class="icon svg-icon" aria-hidden="true">
1072
+ <use xlink:href="#icon-divider"></use>
1073
+ </svg>
1074
+ <div class="name">分割线</div>
1075
+ <div class="code-name">#icon-divider</div>
1076
+ </li>
1077
+
1078
+ <li class="dib">
1079
+ <svg class="icon svg-icon" aria-hidden="true">
1080
+ <use xlink:href="#icon-input"></use>
1081
+ </svg>
1082
+ <div class="name">单行文本</div>
1083
+ <div class="code-name">#icon-input</div>
1084
+ </li>
1085
+
1086
+ <li class="dib">
1087
+ <svg class="icon svg-icon" aria-hidden="true">
1088
+ <use xlink:href="#icon-selects"></use>
1089
+ </svg>
1090
+ <div class="name">多选框</div>
1091
+ <div class="code-name">#icon-selects</div>
1092
+ </li>
1093
+
1094
+ <li class="dib">
1095
+ <svg class="icon svg-icon" aria-hidden="true">
1096
+ <use xlink:href="#icon-textarea"></use>
1097
+ </svg>
1098
+ <div class="name">多行文本</div>
1099
+ <div class="code-name">#icon-textarea</div>
1100
+ </li>
1101
+
1102
+ <li class="dib">
1103
+ <svg class="icon svg-icon" aria-hidden="true">
1104
+ <use xlink:href="#icon-datatable"></use>
1105
+ </svg>
1106
+ <div class="name">表格</div>
1107
+ <div class="code-name">#icon-datatable</div>
1108
+ </li>
1109
+
1110
+ <li class="dib">
1111
+ <svg class="icon svg-icon" aria-hidden="true">
1112
+ <use xlink:href="#icon-modal"></use>
1113
+ </svg>
1114
+ <div class="name">弹窗</div>
1115
+ <div class="code-name">#icon-modal</div>
1116
+ </li>
1117
+
1118
+ <li class="dib">
1119
+ <svg class="icon svg-icon" aria-hidden="true">
1120
+ <use xlink:href="#icon-date"></use>
1121
+ </svg>
1122
+ <div class="name">date</div>
1123
+ <div class="code-name">#icon-date</div>
1124
+ </li>
1125
+
1126
+ <li class="dib">
1127
+ <svg class="icon svg-icon" aria-hidden="true">
1128
+ <use xlink:href="#icon-codeEditor"></use>
1129
+ </svg>
1130
+ <div class="name">富文本编辑器_缩进</div>
1131
+ <div class="code-name">#icon-codeEditor</div>
1132
+ </li>
1133
+
1134
+ <li class="dib">
1135
+ <svg class="icon svg-icon" aria-hidden="true">
1136
+ <use xlink:href="#icon-biaodanzujian-biaoge"></use>
1137
+ </svg>
1138
+ <div class="name">表单组件-表格</div>
1139
+ <div class="code-name">#icon-biaodanzujian-biaoge</div>
1140
+ </li>
1141
+
1142
+ </ul>
1143
+ <div class="article markdown">
1144
+ <h2 id="symbol-">Symbol 引用</h2>
1145
+ <hr>
1146
+
1147
+ <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
1148
+ 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
1149
+ <ul>
1150
+ <li>支持多色图标了，不再受单色限制。</li>
1151
+ <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
1152
+ <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
1153
+ <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
1154
+ </ul>
1155
+ <p>使用步骤如下：</p>
1156
+ <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
1157
+ <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
1158
+ </code></pre>
1159
+ <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
1160
+ <pre><code class="language-html">&lt;style&gt;
1161
+ .icon {
1162
+ width: 1em;
1163
+ height: 1em;
1164
+ vertical-align: -0.15em;
1165
+ fill: currentColor;
1166
+ overflow: hidden;
1167
+ }
1168
+ &lt;/style&gt;
1169
+ </code></pre>
1170
+ <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
1171
+ <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
1172
+ &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
1173
+ &lt;/svg&gt;
1174
+ </code></pre>
1175
+ </div>
1176
+ </div>
1177
+
1178
+ </div>
1179
+ </div>
1180
+ <script>
1181
+ $(document).ready(function () {
1182
+ $('.tab-container .content:first').show()
1183
+
1184
+ $('#tabs li').click(function (e) {
1185
+ var tabContent = $('.tab-container .content')
1186
+ var index = $(this).index()
1187
+
1188
+ if ($(this).hasClass('active')) {
1189
+ return
1190
+ } else {
1191
+ $('#tabs li').removeClass('active')
1192
+ $(this).addClass('active')
1193
+
1194
+ tabContent.hide().eq(index).fadeIn()
1195
+ }
1196
+ })
1197
+ })
1198
+ </script>
1199
+ </body>
1200
+ </html>