Typography 文字与内容

封装了文字相关的组件用于显示。

导入

import Text from '@/components/basic/Text.vue';
import A from '@/components/typography/A.vue';
import B from '@/components/typography/B.vue';
import H1 from '@/components/typography/H1.vue';
import H2 from '@/components/typography/H2.vue';
import H3 from '@/components/typography/H3.vue';
import H4 from '@/components/typography/H4.vue';
import H5 from '@/components/typography/H5.vue';
import H6 from '@/components/typography/H6.vue';
import I from '@/components/typography/I.vue';
import S from '@/components/typography/S.vue';
import U from '@/components/typography/U.vue';

用法

标题

不同的标题等级

vue

<template>
  <H1>这是标题1</H1>
  <H2>这是标题2</H2>
  <H3>这是标题3</H3>
  <H4>这是标题4</H4>
  <H5>这是标题5</H5>
  <H6>这是标题6</H6>
</template>

粗体斜体

vue

<template>
  <B>这是粗体文字</B>
  <I>这是斜体文字</I>
</template>

文字线

vue

<template>
  <S>这段字符串中间有条删除线</S>
  <U>这段字符串有条下划线</U>
</template>

链接

可以指定 href 属性来跳转链接，在H5会打开新页面，App会打开浏览器跳转，小程序平台不支持跳转网页，会提示用户已复制链接，用户需要手动打开浏览器跳转。

vue

<template>
  <A @click="handleClick">可以点击的链接</A>
  <A href="https://uniapp.dcloud.net.cn/">uniapp.dcloud.net.cn</A>
</template>

文字组件

可以使用封装的组件快速组合多个样式。

vue

<template>
  <Text bold italic>粗体+斜体文字</Text>
  <Text bold italic underline>粗体+斜体+下划线文字</Text>
  <Text bold italic underline lineThrough>粗体+斜体+下划线+删除线文字</Text>
</template>

API 参考

以上所有组件都支持以下属性。

Props

名称	说明	类型	必填	默认值
text	显示的文字内容。如果定义了插槽则属性值无效。	`string`	-	-
color	字体颜色。可以是颜色字符串或者在主题中配置的预设名称。	`string`	-	-
shadowColor	文字阴影颜色。可以是颜色字符串或者在主题中配置的预设名称。	`number｜string`	-	-
textAlign	文字对齐方式。可选center、left、right。	`string`	-	-
fontConfig	字体预设。可以是主题中预设的一个名称。	`string`	-	-
fontSize	字体大小。可以是实际数值或者在主题中配置的预设名称。	`string`	-	-
fontFamily	字体-family。	`string`	-	-
fontStyle	字体-style。可选normal、italic。	`string`	-	-
fontWeight	字体-weight。可选normal、bold或者数字值。	`string`	-	-
bold	是否加粗。	`boolean`	-	`false`
italic	是否斜体。	`boolean`	-	`false`
underline	是否下划线。	`boolean`	-	`false`
lineThrough	是否删除线。	`boolean`	-	`false`
shadow	是否添加文字阴影。	`boolean`	-	`false`
backgroundColor	背景颜色。可以是颜色字符串或者在主题中配置的预设名称。	`string`	-	-
selectable	是否可选中。	`boolean`	-	`false`
lines	行数限制。	`number`	-	-
maxWidth	最大宽度。	`number`	-	-
innerStyle	自定义样式。	`object`	-	-
innerClass	自定义类名。	`string`	-	-
margin	外边距。	`string`	-	-
padding	内边距。	`number｜string｜number[]｜ThemePaddingMargin`	-	-
margin	外边距。	`number｜string｜number[]｜ThemePaddingMargin`	-	-
autoSize	是否自动调整字体大小以适应内容。参照下方说明。	`object`	-	`false`
touchable	是否可点击。	`boolean`	-	`false`

A Props

链接组件特殊属性

名称	说明	类型	必填	默认值
href	链接地址	`string`	-	-
linkType	链接类型	`'auto' \| "uni-page" \| "url" \| "custom" \| "back"`	-	`"auto"`

linkType 说明

auto 表示自动判断，根据 href 是否以 / 开头判断是否为 uni-app 页面，以 http 或 https 开头判断为外部链接。
uni-page 表示跳转 uni-app 页面（uni.navigateTo 打开）
url 表示跳转外部链接，h5 环境下会使用 window.open 打开，app 会调用 plus 打开浏览器，小程序平台不支持跳转网页，会提示用户已复制链接，用户需要手动打开浏览器跳转。
custom 表示自定义跳转，需要在点击事件中处理。
back 表示返回上一页。

autoSize 说明

自动工具文字长短设置大小，在 autoSize 为 true 时有效。

这个是一个小功能，目的是为了在某些情况下（例如金额显示），容器宽度一定但是文字长短不定，此时需要自动缩放大小，文字越长，字号越小。

计算公式是 (1 - (text.length - minLen) / (maxLen - minLen)) * (maxSize - minSize) + minSize

autoSize 对象内容：

名称	说明	类型
text	小程序无法获取模板内容，需要额外提供字符串	`string`
maxLen	最长文字长度，用于自动大小公式计算	`number`
minLen	最短文字长度，如果输入文字长度小于这个值，则不会进行自动缩放	`number`
maxSize	最大文字字号，用于自动大小公式计算	`number`
minSize	最小文字字号，用于自动大小公式计算	`number`

Slots

名称	说明
default	默认插槽，用于显示文字内容

Events

名称	说明	参数
click	点击事件	`$event`

Typography 文字与内容 ​

导入 ​

用法 ​

标题 ​

粗体斜体 ​

文字线 ​

链接 ​

文字组件 ​

API 参考 ​

Props ​

A Props ​

linkType 说明 ​

autoSize 说明 ​

Slots ​

Events ​