WU-UIText
此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，*替换，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件几乎涵盖您能使用的大部分场景。
平台兼容性
| App(vue) | App(nvue) | H5 | 小程序 | VUE2 | VUE3 |
|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ |
基本使用
通过 text 参数设置文本内容。推荐您使用 :text='value' 的形式
vue
<wu-text text="大鹏一日同风起，扶摇直上九万里"></wu-text><wu-text text="大鹏一日同风起，扶摇直上九万里"></wu-text>设置主题
- 通过
type参数设置文本主题，我们提供了五类属性。 primary error success warning info
vue
<wu-text type="primary" text="主色"></wu-text>
<wu-text type="error" text="错误"></wu-text>
<wu-text type="success" text="成功"></wu-text>
<wu-text type="warning" text="警告"></wu-text>
<wu-text type="info" text="信息"></wu-text><wu-text type="primary" text="主色"></wu-text>
<wu-text type="error" text="错误"></wu-text>
<wu-text type="success" text="成功"></wu-text>
<wu-text type="warning" text="警告"></wu-text>
<wu-text type="info" text="信息"></wu-text>拨打电话
- 通过将
mode属性设置为phone即可调用拨打电话，提供加密值encrypt - 除此之外还有格式化日期，姓名脱敏，超链接，千分位金额等属性，将在以下实例中展示
vue
<wu-text mode="phone" text="17363987953"></wu-text><wu-text mode="phone" text="17363987953"></wu-text>日期格式化
vue
<wu-text mode="date" text="1691825812"></wu-text><wu-text mode="date" text="1691825812"></wu-text>姓名脱敏
vue
<wu-text mode="name" text="张三三" format="encrypt"></wu-text><wu-text mode="name" text="张三三" format="encrypt"></wu-text>超链接
添加 href 指定链接地址
vue
<wu-text mode="link" text="Go to uView docs" href="https://wu.geeks.ink"></wu-text><wu-text mode="link" text="Go to uView docs" href="https://wu.geeks.ink"></wu-text>显示金额
vue
<wu-text mode="price" text="1723231.77"></wu-text><wu-text mode="price" text="1723231.77"></wu-text>超出隐藏
内置了文字超出隐藏样式，设置 lines 属性表明几行后隐藏
vue
<wu-text :lines="2" text="关于wu-ui的取名来由，来自于一个玩笑，我曾经和几个很要好的朋友说，我们成立一个组织，叫卧龙凤雏吧，首字母 w 来自于卧的首字母，u则来自于 uniapp，故取名wu-ui，表达源于uni-app和uView，在此也对它们表示感谢。"></wu-text><wu-text :lines="2" text="关于wu-ui的取名来由，来自于一个玩笑，我曾经和几个很要好的朋友说，我们成立一个组织，叫卧龙凤雏吧，首字母 w 来自于卧的首字母，u则来自于 uniapp，故取名wu-ui，表达源于uni-app和uView，在此也对它们表示感谢。"></wu-text>小程序开放能力
针对小程序开放能力，我们提供了分享，请在小程序环境下使用
vue
<wu-text text="分享到微信" openType="share" type="success" @click="clickHandler"></wu-text>
<script>
export default {
onLoad() {},
methods: {
clickHandler() {
// #ifndef MP-WEIXIN
this.$w.toast('请在微信小程序内查看效果')
// #endif
}
},
}
</script><wu-text text="分享到微信" openType="share" type="success" @click="clickHandler"></wu-text>
<script>
export default {
onLoad() {},
methods: {
clickHandler() {
// #ifndef MP-WEIXIN
this.$w.toast('请在微信小程序内查看效果')
// #endif
}
},
}
</script>API
Text Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| type | 主题颜色 | String | - | - |
| show | 是否显示 | Boolean | true | true / false |
| text | 显示的值 | String / Number | - | - |
| prefixIcon | 前置图标 | String | - | - |
| suffixIcon | 后置图标 | String | - | - |
| mode | 文本处理的匹配模式，text-普通文本，price-价格，phone-手机号，name-姓名，date-日期，link-超链接 | String | - | - |
| href | mode=link下，配置的链接 | String | - | - |
| format | 格式化规则 | String / Function | - | - |
| call | mode=phone时，点击文本是否拨打电话 | Boolean | false | true / false |
| openType | 小程序的打开方式 | String | - | - |
| bold | 是否粗体，默认normal | Boolean | false | true / false |
| block | 是否块状 | Boolean | false | true / false |
| lines | 文本显示的行数，如果设置，超出此行数，将会显示省略号 | String / Number | - | - |
| color | 文本颜色 | String | - | - |
| size | 字体大小 | String / Number | 15 | - |
| iconStyle | 图标的样式 | Object / String | 15px | - |
| decoration | 文字装饰，下划线，中划线等 | String | none | underline / line-through |
| margin | 外边距，对象、字符串，数值形式均可 | Object / Number / String | - | - |
| lineHeight | 文本行高 | Number / String | - | - |
| align | 文本对齐方式 | String | left | left / center/ right |
| wordWrap | 文字换行 | String | normal | break-word / anywhere |
Text Events
| 属性名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击触发事件 | - |