uv-ui

# Text 文本

✈

组件名：uv-text

点击下载&安装 (opens new window)

此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，*替换，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件涵盖您能使用的大部分场景。

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本使用

  • 通过text参数设置文本内容。推荐您使用:text='value'的形式
<uv-text text="我用十年青春,赴你最后之约"></uv-text>

# 设置主题

通过type参数设置文本主题，我们提供了五类属性：primary error success warning info。

<uv-text type="primary" text="主色"></uv-text>
<uv-text type="error"   text="错误"></uv-text>
<uv-text type="success" text="成功"></uv-text>
<uv-text type="warning" text="警告"></uv-text>
<uv-text type="info"    text="信息"></uv-text>

# 拨打电话

通过将mode属性设置为phone即可调用拨打电话，提供加密值format="encrypt"电话号码中间脱敏

<uv-text mode="phone" text="15019479320"></uv-text> <!--15019479320-->
<uv-text mode="phone" format="encrypt" text="15019479320"></uv-text> <!--150****9320-->

# 日期格式化

通过将mode属性设置为date

<uv-text mode="date" text="1612959739"></uv-text> <!--2021-02-10-->

# 姓名脱敏

通过将mode属性设置为name，同时设置 format="encrypt"属性


<uv-text mode="name" text="张三三" format="encrypt"></uv-text> <!--张*三-->

# 超链接

通过将mode属性设置为link，同时设置href指定链接地址

<uv-text mode="link" text="Go to uv-ui docs" href="https://www.uv-uiui.com" ></uv-text>

# 显示金额

通过将mode属性设置为price

<uv-text mode="price" text="728732.32"></uv-text>

# 前后图标

添加prefixIcon,suffixIcon指定图标和位置，iconStyle设置图标大小

<uv-text prefixIcon="baidu" iconStyle="font-size: 19px" text="百度一下,你就知道"></uv-text>
<uv-text suffixIcon="arrow-leftward" iconStyle="font-size: 18px" text="查看更多"></uv-text>

# 超出隐藏

内置了文字超出隐藏样式，设置lines属性表明几行后隐藏

<uv-text :lines="2" text="关于uv-ui的取名来由，首字母u来自于uni-app首字母，
uni-app是基于Vue.js，Vue和View(延伸为UI、视图之意)同音，故取名uv-ui，
表达源于uni-app和Vue和uView之意，同时在此也对它们表示感谢。"></uv-text>

# 小程序开放能力

针对小程序开放能力，我们提供了分享，请在小程序环境下使用

注意：使用uni上挂载的uv-ui内置方法，需要根据扩展配置 - JS工具库进行相应的配置，否则直接会报错！

<uv-text text="分享到微信" openType="share" type="success" @click="clickHandler"></uv-text>
<script>
	export default {
		onLoad() {},
		methods: {
			clickHandler() {
				// #ifndef MP-WEIXIN
				uni.showToast({
					icon: 'none',
					title: '请在微信小程序内查看效果'
				})
				// #endif
			}
		},
	}
</script>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Text Props

参数 说明 类型 默认值 可选值
text 显示的值 String | Number - -
type 主题颜色 String - -
show 是否显示 Boolean true true | false
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 是否块状 ，仅vue生效 Boolean false true | false
lines 文本显示的行数，如果设置，超出此行数，将会显示省略号。最大值为5。 String | Number - -
color 文本颜色 String #303133 -
size 字体大小 String | Number 15 -
iconStyle 图标的样式 Object | String 15px -
decoration 文字装饰，下划线，中划线等 String none none | underline | line-through
margin 外边距，对象、字符串，数值形式均可 Object | Number | String - -
lineHeight 文本行高 Number | String - -
align 文本对齐方式 String left left | center | right
wordWrap 文字换行 String normal normal | break-word | anywhere
customStyle 自定义样式，eg：:custom-style="{color:'red',width:'20px'}" Object - -

# Text Events

事件名 说明 回调参数
@click 点击触发事件 -

← Link 超链接 →