uniapp中uview的text组件
针对小程序开放能力,我们提供了分享,请在小程序环境下使用。内置了文字超出隐藏样式,设置。
·
基本使用:
- 通过
text
参数设置文本内容。推荐您使用:text='value'
的形式
<u--text text="我用十年青春,赴你最后之约"></u--text>
设置主题:
- 通过
type
参数设置文本主题,我们提供了五类属性。 primary error success warning info
<u--text type="primary" text="主色"></u--text>
<u--text type="error" text="错误"></u--text>
<u--text type="success" text="成功"></u--text>
<u--text type="warning" text="警告"></u--text>
<u--text type="info" text="信息"></u--text>
拨打电话:
- 通过将
mode
属性设置为phone
即可调用拨打电话,提供加密值encrypt
- 除此之外还有格式化日期,姓名脱敏,超链接,千分位金额等属性,将在以下实例中展示
<u--text mode="phone" text="15019479320"></u--text>
日期格式化
<u--text mode="date" text="1612959739"></u--text>
#姓名脱敏
<u--text mode="name" text="张三三" format="encrypt"></u--text>
#超链接
添加href
指定链接地址
<u--text mode="link" text="Go to uView docs" href="https://www.uviewui.com" ></u--text>
#显示金额
<u--text mode="price" text="728732.32"></u--text>
#前后图标
添加prefixIcon,suffixIcon
指定图标和位置,iconStyle
设置图标大小
#超出隐藏
内置了文字超出隐藏样式,设置lines
属性表明几行后隐藏
<u--text :lines="2" text="关于uView的取名来由,首字母u来自于uni-app首字母,
uni-app是基Vuejs,Vue和View(延伸为UI、视图之意)同音,同时view组件uni-app中
最础最重要的组件,故取名uView,表达源于uni-app和Vue之意,同时在此也对它示感谢。"></u--text>
#小程序开放能力
针对小程序开放能力,我们提供了分享,请在小程序环境下使用
<u--text text="分享到微信" openType="share" type="success" @click="clickHandler"></u--text>
<script>
export default {
onLoad() {},
methods: {
clickHandler() {
// #ifndef MP-WEIXIN
uni.$u.toast('请在微信小程序内查看效果')
// #endif
}
},
}
</script>
API
#List Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
type | 主题颜色 | String | - | - |
show | 是否显示 | Boolean | 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 |
openType | 小程序的打开方式 | String | - | - |
bold | 是否粗体,默认normal | Boolean | false | true |
block | 是否块状 | Boolean | false | true |
lines | 文本显示的行数,如果设置,超出此行数,将会显示省略号 | String | Number | - | - |
color | 文本颜色 | String | #303133 | - |
size | 字体大小 | String | Number | 15 | - |
iconStyle | 图标的样式 | Object | String | 15px | - |
decoration | 文字装饰,下划线,中划线等 | String | none | underline/line-through |
margin | 外边距,对象、字符串,数值形式均可 | Object | Number | String | - | - |
lineHeight | 文本行高 | Number | String | - | - |
align | 文本对齐方式 | String | left | center/right |
wordWrap | 文字换行 | String | normal | break-word/anywhere |
#List Events
事件名 | 说明 | 回调参数 |
---|---|---|
click | 点击触发事件 | - |
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献14条内容
所有评论(0)