基礎(chǔ)內(nèi)容包含：
icon、text、rich-text、progress
1.icon：圖標(biāo)
平臺(tái)支持度：
| 5+App | H5 | 微信小程序 | 支付寶小程序 | 百度小程序 |
|---|---|---|---|---|
| √ | x | √ | √ | √ |
屬性說(shuō)明：
| 屬性名 | 類(lèi)型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| type | String | icon的類(lèi)型 | |
| size | Number | 23 | icon的大小，單位px |
| color | Color | icon的顏色，同css的color |
各平臺(tái) type 有效值說(shuō)明：
| 平臺(tái) | type 有效值 |
|---|---|
| 5+App | success, success_no_circle, info, warn, waiting, cancel, download, search, clear |
| 微信小程序 | success, success_no_circle, info, warn, waiting, cancel, download, search, clear |
| 支付寶小程序 | info, warn, waiting, cancel, download, search, clear, success, success_no_circle,loading |
| 百度小程序 | success, info, warn, waiting, success_no_circle, clear, search, personal, setting, top, close, cancel, download, checkboxSelected, radioSelected, radioUnselect |
2.text:文本
屬性說(shuō)明：
| 屬性名 | 類(lèi)型 | 默認(rèn)值 | 說(shuō)明 | 平臺(tái)支持 |
|---|---|---|---|---|
| selectable | Boolean | false | 是否可長(zhǎng)按選中文本 | |
space |
String | 顯示連續(xù)空格 | 5+APP、H5、微信小程序 | |
| decode | Boolean | false | 是否解碼 | 5+APP、H5、微信小程序 |
space 值說(shuō)明:
| 值 | 說(shuō)明 |
|---|---|
| ensp | 中文字符空格一半大小 |
| emsp | 中文字符空格大小 |
| nbsp | 根據(jù)字體設(shè)置的空格大小 |
Tips：
decode 可以解析的有 < > & '    各個(gè)操作系統(tǒng)的空格標(biāo)準(zhǔn)并不一致<text> 組件內(nèi)只支持 <text> 嵌套除了文本節(jié)點(diǎn)以外的其他節(jié)點(diǎn)都無(wú)法長(zhǎng)按選中支持 \n 方式換行如果使用 <span> 組件編譯時(shí)會(huì)被轉(zhuǎn)換為 <text>
3.rich-text:富文本
??富文本，通過(guò)
nodes這個(gè)屬性，來(lái)添加節(jié)點(diǎn)，現(xiàn)支持兩種類(lèi)型的節(jié)點(diǎn)，通過(guò) type 來(lái)區(qū)分，分別是元素節(jié)點(diǎn)和文本節(jié)點(diǎn)，默認(rèn)是元素節(jié)點(diǎn)，在富文本區(qū)域里顯示的 HTML 節(jié)點(diǎn)。
??支持默認(rèn)事件包括：click、touchstart、touchmove、touchcancel、touchend、longpress。
rich-text富文本屬性說(shuō)明：
| 屬性名 | 類(lèi)型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| nodes | Array / String | [] | 節(jié)點(diǎn)列表 / HTML String |
nodes為元素節(jié)點(diǎn)時(shí)（type = node）：
| 屬性 | 說(shuō)明 | 類(lèi)型 | 必填 | 備注 |
|---|---|---|---|---|
| name | 標(biāo)簽名 | String | 是 | 支持部分受信任的 HTML 節(jié)點(diǎn) |
| attrs | 屬性 | Object | 否 | 支持部分受信任的屬性，遵循 Pascal 命名法 |
| children | 子節(jié)點(diǎn)列表 | Array | 否 | 結(jié)構(gòu)和 nodes 一致 |
nodes為文本節(jié)點(diǎn)時(shí)（type = text）：
| 屬性 | 說(shuō)明 | 類(lèi)型 | 必填 | 備注 |
|---|---|---|---|---|
| text | 文本 | String | 是 | 支持 entities |
受信任的html節(jié)點(diǎn)有： a、abbr、b、blockquote、br、code、col、colgroup、dd、del、div、dl、dt、em、fieldset、h1、h2、h3、h4、h5、h6、hr、i、img、ins、label、legend、li、ol、p、q、span、strong、sub、sup、table、tbody、td、tfoot、th、thead、tr、ul，支持class和style屬性，不支持id屬性
Tips:
nodes 屬性推薦使用 Array 類(lèi)型，因?yàn)樵谑褂肧tring類(lèi)型時(shí)，組件會(huì)先將 String 類(lèi)型轉(zhuǎn)換為 Array 類(lèi)型，這時(shí)性能會(huì)有所下降rich-text 組件內(nèi)屏蔽所有節(jié)點(diǎn)的事件attrs 屬性不支持 id ，支持 classname 屬性大小寫(xiě)不敏感如果使用了不受信任的HTML節(jié)點(diǎn)，該節(jié)點(diǎn)及其所有子節(jié)點(diǎn)將會(huì)被移除img 標(biāo)簽僅支持網(wǎng)絡(luò)圖片如果在自定義組件中使用 rich-text 組件，那么僅自定義組件的 css 樣式對(duì) rich-text 中的 class 生效
4.progress:進(jìn)度條
屬性說(shuō)明：
| 屬性名 | 類(lèi)型 | 默認(rèn)值 | 說(shuō)明 | 平臺(tái)支持 |
|---|---|---|---|---|
| percent | Float | 無(wú) | 百分比0~100，超過(guò)100時(shí)也只顯示100%
|
|
| show-info | Boolean | false | 在進(jìn)度條右側(cè)顯示百分比 | |
| stroke-width | Number | 6 | 進(jìn)度條線的寬度，單位px | |
| activeColor | Color | #09BB07 | 已選擇的進(jìn)度條的顏色 | |
| backgroundColor | Color | #EBEBEB | 未選擇的進(jìn)度條的顏色 | |
| active | Boolean | false | 進(jìn)度條從左往右的動(dòng)畫(huà) | |
| active-mode | String | backwards | backwards: 動(dòng)畫(huà)從頭播；forwards：動(dòng)畫(huà)從上次結(jié)束點(diǎn)接著播 | 微信小程序、5+APP、H5 |
| @activeend | EventHandle | 動(dòng)畫(huà)完成事件 | 微信小程序 |
示例：
在自定義進(jìn)度條樣式時(shí)，需要放在app.vue全局樣式中才生效，不知道為什么（手動(dòng)添加懵逼表情），并且在設(shè)置了進(jìn)度條為圓角時(shí)，微信小程序中是不生效的，下圖是瀏覽器中的效果：
