Text 文本
Text 文本,用于包裹文本内容。
# 支持平台
| App(vue) | App(nvue) | H5 | 小程序 |
|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ |
# 代码演示
部分示例演示,完整使用请参考文档API。
# 基础使用
通过 text 属性设置文本内容,size 属性设置字体大小。
<wui-text :text="text" :size="28"></wui-text>
const text = ref('wlyyUI是一套超高性能、超高颜值的移动端UI综合解决方案,包含业内顶尖的组件库、强大的功能库、丰富精美的模板库,提供uni-app(完美支持nvue)、微信小程序、支付宝小程序等版本,兼顾高效率与高性能,让您的开发获得百倍提质提速!')
# 不同样式类型
通过 text 属性设置文本内容, type 属性设置样式类型。
<wui-text text="primary" type="primary"></wui-text>
<wui-text text="success" type="success"></wui-text>
<wui-text text="warning" type="warning"></wui-text>
<wui-text text="danger" type="danger"></wui-text>
# 自定义颜色/块状
通过 text 属性设置文本内容, color 属性设置字体颜色, block 属性设置是否为块状。
<wui-text text="block" color="brown" block></wui-text>
# 数据脱敏-姓名
通过 text 属性设置文本内容, text-type属性设置文本类型, format 属性设置文本是否脱敏格式化。
<wui-text text="张无忌" text-type="name" format></wui-text>
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 文本左侧自定义内容 |
| right | 文本右侧自定义内容 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| type | String | 样式类型,可选值:primary,success, warning,danger,purple,gray,black | black | - |
| text | String | 文本内容 | - | - |
| size | Number, String | 字体大小 | 32 | - |
| unit | String | 字体大小单位,可选值:rpx、px | rpx | - |
| color | String | 字体颜色,设置值则type失效 | - | - |
| fontWeight | String | 字重 | 400 | - |
| align | String | 文本对齐方式,可选值:left、center、right | left | - |
| decoration | String | 文本的修饰,可选值:none、 underline、line-through | none | - |
| lineHeight | Boolean | 是否将行高设置与字体大小一致 | false | - |
| padding | Array | 文本padding值,[上,右,下,左] | ['0', '0'] | - |
| block | Boolean | 是否为块状 | false | - |
| textType | String | 文本类型,可选值:text、mobile、amount、name | text | - |
| format | Boolean | 文本是否脱敏格式化,仅textType取值mobile、amount时有效 | false | - |
| call | Boolean | 点击时是否拨打电话,仅textType取值mobile时有效 | false | - |
| selectable | Boolean | 文本是否可选 | false | App、H5、快手小程序有效 |
| userSelect | Boolean | 文本是否可选 | false | 仅微信小程序有效 |
| decode | Boolean | 是否解码 | false | App、H5、微信小程序有效 |
| highlight | Boolean | 是否有点击效果 | false | - |
| disable | Boolean | 是否禁用点击 | false | - |
| unShrink | Boolean | flex布局下是否取消收缩,不被挤压 | false | - |
| param | Number, String | 自定义参数,点击事件中回传 | - | - |