uni-app基础组件—基础内容（Basic Content）

基础内容包含：icon、text、rich-text、progress

1.icon：图标

平台支持度：

5+App	H5	微信小程序	支付宝小程序	百度小程序
√	x	√	√	√

属性说明：

属性名	类型	默认值	说明
type	String		icon的类型
size	Number	23	icon的大小，单位px
color	Color		icon的颜色，同css的color

各平台 type 有效值说明：

平台	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:文本

属性说明：

属性名	类型	默认值	说明	平台支持
selectable	Boolean	false	是否可长按选中文本
space	String		显示连续空格	5+APP、H5、微信小程序
decode	Boolean	false	是否解码	5+APP、H5、微信小程序

space 值说明:

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

Tips：

• decode 可以解析的有   < > & '    
• 各个操作系统的空格标准并不一致
• 组件内只支持 嵌套
• 除了文本节点以外的其他节点都无法长按选中
• 支持 \n 方式换行
• 如果使用 组件编译时会被转换为

---

3.rich-text:富文本

  富文本，通过nodes这个属性，来添加节点，现支持两种类型的节点，通过 type 来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的 HTML 节点。
  支持默认事件包括：click、touchstart、touchmove、touchcancel、touchend、longpress。

rich-text富文本属性说明：

属性名	类型	默认值	说明
nodes	Array / String	[]	节点列表 / HTML String

nodes为元素节点时（type = node）：

属性	说明	类型	必填	备注
name	标签名	String	是	支持部分受信任的 HTML 节点
attrs	属性	Object	否	支持部分受信任的属性，遵循 Pascal 命名法
children	子节点列表	Array	否	结构和 nodes 一致

nodes为文本节点时（type = text）：

属性	说明	类型	必填	备注
text	文本	String	是	支持 entities

受信任的html节点有： 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 类型，因为在使用String类型时，组件会先将 String 类型转换为 Array 类型，这时性能会有所下降
• rich-text 组件内屏蔽所有节点的事件
• attrs 属性不支持 id ，支持 class
• name 属性大小写不敏感
• 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除
• img 标签仅支持网络图片
• 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 css 样式对 rich-text 中的 class 生效

---

4.progress:进度条

属性说明：

属性名	类型	默认值	说明	平台支持
percent	Float	无	百分比0~100，超过100时也只显示100%
show-info	Boolean	false	在进度条右侧显示百分比
stroke-width	Number	6	进度条线的宽度，单位px
activeColor	Color	#09BB07	已选择的进度条的颜色
backgroundColor	Color	#EBEBEB	未选择的进度条的颜色
active	Boolean	false	进度条从左往右的动画
active-mode	String	backwards	backwards: 动画从头播；forwards：动画从上次结束点接着播	微信小程序、5+APP、H5
@activeend	EventHandle		动画完成事件	微信小程序

示例：

在自定义进度条样式时，需要放在app.vue全局样式中才生效，不知道为什么（手动添加懵逼表情），并且在设置了进度条为圆角时，微信小程序中是不生效的，下图是浏览器中的效果：