Text 文本

此组件为uni-app的text组件的加强版，在继承了原有功能外新增了其他功能。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
type	String	text	类型text,date,number	All
text	String,Number,Object	null	文本	All
before	String,Number	null	前置文本	All
after	String,Number	null	后置文本	All
numberFormat	String	0,0[.]00	type="number"数字格式化，详细参考numeraljs	All
dateFormat	String,Number,Object	YYYY-MM-DD HH:mm	type="date"日期格式化，详细参考dayjs	All
dateExtend	Array	null	日期扩展方法 格式：[扩展名,方法名,参数] 扩展名：'relativeTime','fromNow,toNow' 方法名：'duration','asYears,asWeeks,asMonths,asDays,asHours,asMinutes,asSeconds,milliseconds' 参数：'d,w,M,y,h,m,s,ms 注意：需要引入对应插件，例如：dayjs.extend(duration);	All
color	String	c-t-main	颜色 支持c-t-开头的颜色类	All
fontSize	Number,String	28rpx	大小	All
line	Number,String	null	行数，超出显示“...”，在app下设置line=1时组件会样式会设置为flex:1	All
lineHeight	Number,String	null	行高	All
bold	Boolean,String,Number	false	加粗	All
align	String	null	对齐	All
italic	Boolean	false	斜体	All
delete	Boolean	false	删除线	All
underline	Boolean	false	下划线	All
wrap	String	anywhere	文本换行	All
selectable	Boolean	false	参考uni-app的text组件	All
userSelect	Boolean	false	参考uni-app的text组件	All
space	String		参考uni-app的text组件	All
decode	Boolean	true	参考uni-app的text组件	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

注意

type="date" 需要安装 npm install dayjs --save

type="number" 需要安装 npm install numeral--save

安装完成后，在main.js中挂载CookUni({numeral,dayjs})插件，才能正常使用。

事件

事件名	说明
click

示例

<template>
    <c-text text="次要文字" color="c-t-regular" />

    <c-text text="主色调文字" color="c-t-primary" />

    <c-text text="2024/08/09" type="date" dateFormat="YYYY-MM-DD" />
</template>

颜色SCSS配置

文字颜色支持以c-t-开头的颜色类，支持c-t-main,c-t-regular,c-t-secondary,c-t-placeholder四种文字颜色。

// 默认文字颜色
$text-color: #303133;

// 4中文字颜色
$text-colors: (
        'main': $text-color,
        'regular': mix($color-white, $text-color, 23),
        'secondary': mix($color-white, $text-color, 46),
        'placeholder': mix($color-white, $text-color, 70)
        // 可自行扩展其他文字颜色
);