Text 文本
基础用法
- 只支持通过
text属性传值(这个要是用插槽,反而会多套一层text)
vue
<sn-text text="这是一段文本"></sn-text>更多演示请下载 demo 查看
文本模式
目前支持通过 mode 属性设置文本的模式,轻松实现常见功能,为您减少代码量。
text
默认模式,与内置
text组件无异。date
日期模式,支持通过传入时间戳(需转换为String类型),实现自动格式化日期为
yyyy-mm-dd的形式(以后会支持自定义格式)。date-cn
日期模式(中文),与
date用法相同,但是能转成中文yyyy年mm月dd日。price
价格模式,很简单的功能,将传入的文本前加一个 ¥(挺没用的哈,以后可能会加以改进,支持更多功能,比如汇率、国际化之类的)
price-upper
价格模式(大写),自动识别传入数字,并将其转换为中文大写金额,精确到分。使用
snu.numToUpper()方法例:
168201.03 => 壹拾陆万捌仟贰佰零壹元零叁分name
姓名模式,需搭配
encrypt属性使用,否则与text模式效果相同。phone
电话模式,点击后向用户发送请求,用户同意后直接拨打电话。
phone-direct
电话模式(直接拨打),点击后无需征求用户同意,直接拨打电话(但如果没有权限,还是会先请求拨号权限)。
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| mode | 文本显示模式 | String | text | text|date| date-cn | price | price-upper | name | phone | phone-direct |
| text | 文本内容 | String | - | - |
| color | 文本颜色 | String | - | - |
| type | 文本类型 | String | info | primary|info|error|warning|success |
| font | 字体名称 | String | $mainFamily | - |
| size | 字体大小 | String | $2 | - |
| align | 对齐方式 | String | left | left|center|right |
| overflow | 文本溢出处理 | String | ellipsis | ellipsis | clip |
| decorationLine | 文本装饰线 | String | - | - |
| space | 字符间距。同 text。 | String | - | - |
| decode | 是否解码 (app平台如需解析字符实体,需要配置为 true)。同 text。 | Boolean | false | true |
| selectable | 是否可选择同 text。 | Boolean | false | true |
| lines | 文本最大显示行数(默认为 -1 即不限制) | Number | -1 | - |
| lineHeight | 文本行高 | String | 1.2 | - |
| aniTime | 文本动画时长 | String | $normal | - |
| bold | 是否加粗 | Boolean | false | true |
| encrypt | 是否加密 | Boolean | false | true |
| customStyle | 自定义样式 | UTSJSONObject | {} | - |
| customTextStyle | 自定义文本样式 | UTSJSONObject | {} | - |

