使用场景
用统一主题和密度呈现文本及截断状态。
基础用法与状态
下列示例只使用本入口的实际公开能力。
基础用法与状态
vue
<template>
<div class="flow">
<AsamText v-for="size in sizes" :key="size" :size="size">{{ size }} 文本</AsamText>
</div>
<AsamText
class="short-text"
v-bind="{ truncated: true, title: '这段完整说明超过示例宽度，可以查看完整标题' }"
>
<span>这段完整说明超过示例宽度，可以查看完整标题</span>
</AsamText>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTextBasicDemo' });
import { AsamText } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];
</script>
<style scoped>
.flow {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
align-items: center;
}
.short-text {
width: 180px;
display: inline-block;
}
</style>vue
<template>
<div class="flow">
<AsamText v-for="size in sizes" :key="size" :size="size">{{ size }} 文本</AsamText>
</div>
<AsamText
class="short-text"
v-bind="{ truncated: true, title: '这段完整说明超过示例宽度，可以查看完整标题' }"
>
<span>这段完整说明超过示例宽度，可以查看完整标题</span>
</AsamText>
</template>
<script setup>
defineOptions({ name: 'AsamTextBasicDemo' });
import { AsamText } from '@asam-ui/ui';
const sizes = ['large', 'big', 'default', 'small'];
</script>
<style scoped>
.flow {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
align-items: center;
}
.short-text {
width: 180px;
display: inline-block;
}
</style>使用约定
type、tag、truncated 和 lineClamp 控制语义与截断；default 插槽放文本。截断需配合可计算的宽度或行数，宿主应在需要时提供完整文本访问。ASAM size 支持 large/big/default/small；本入口没有业务事件。
完整使用场景
基础用法
由 type 属性来选择 Text 的类型。
基础用法
vue
<template>
<AsamText class="mx-1">默认</AsamText>
<AsamText class="mx-1" type="primary">主要</AsamText>
<AsamText class="mx-1" type="success">成功</AsamText>
<AsamText class="mx-1" type="info">信息</AsamText>
<AsamText class="mx-1" type="warning">警告</AsamText>
<AsamText class="mx-1" type="danger">危险</AsamText>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTextCapBasicDemo' });
import { AsamText } from '@asam-ui/ui';
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
</style>vue
<template>
<AsamText class="mx-1">默认</AsamText>
<AsamText class="mx-1" type="primary">主要</AsamText>
<AsamText class="mx-1" type="success">成功</AsamText>
<AsamText class="mx-1" type="info">信息</AsamText>
<AsamText class="mx-1" type="warning">警告</AsamText>
<AsamText class="mx-1" type="danger">危险</AsamText>
</template>
<script setup>
defineOptions({ name: 'AsamTextCapBasicDemo' });
import { AsamText } from '@asam-ui/ui';
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
</style>
尺寸
使用 size 属性配置尺寸，可选的尺寸大小有: large, default 或 small
尺寸
vue
<template>
<AsamText class="mx-1" size="large">大尺寸</AsamText>
<AsamText class="mx-1">默认</AsamText>
<AsamText class="mx-1" size="small">小尺寸</AsamText>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTextCapSizesDemo' });
import { AsamText } from '@asam-ui/ui';
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
</style>vue
<template>
<AsamText class="mx-1" size="large">大尺寸</AsamText>
<AsamText class="mx-1">默认</AsamText>
<AsamText class="mx-1" size="small">小尺寸</AsamText>
</template>
<script setup>
defineOptions({ name: 'AsamTextCapSizesDemo' });
import { AsamText } from '@asam-ui/ui';
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
</style>
省略
通过 truncated 属性，在文本超过视图或最大宽度设置时展示省略符。通过 line-clamp 属性控制多行的样式 自 2.14.6 起，公开 isTruncated 表示文本是否被截断，可据此仅在截断时展示文字提示。
省略
vue
<template>
<AsamText class="w-150px mb-2" truncated> 元素自身宽度为 100px </AsamText>
<AsamRow class="w-150px mb-2">
<AsamText truncated>受到父元素空间挤压</AsamText>
</AsamRow>
<AsamRow class="mb-2">
<AsamText line-clamp="2">
CSS 属性 -webkit-line-clamp<br />
可以限制<br />
内容块的行数。
</AsamText>
</AsamRow>
<AsamRow>
<AsamTooltip content="仅在文本被截断时显示文字提示" :disabled="!textRef?.isTruncated">
<!-- prettier-ignore -->
<AsamText
ref="textRef"
class="w-150px"
truncated
v-bind="domTitleAttrs('')"
>
仅在文字被截断时显示提示
</AsamText>
</AsamTooltip>
</AsamRow>
</template>
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue';
defineOptions({ name: 'AsamTextCapTruncatedDemo' });
import { AsamText, AsamRow, AsamTooltip } from '@asam-ui/ui';
import { ref } from 'vue';
const textRef = ref();
const domTitleAttrs = (
title: NonNullable<HTMLAttributes['title']>
): Pick<HTMLAttributes, 'class' | 'title'> => ({ class: 'ui032-text-title', title });
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.w-150px {
width: 150px;
}
.mb-2 {
margin-bottom: 0.5rem;
}
</style>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>vue
<template>
<AsamText class="w-150px mb-2" truncated> 元素自身宽度为 100px </AsamText>
<AsamRow class="w-150px mb-2">
<AsamText truncated>受到父元素空间挤压</AsamText>
</AsamRow>
<AsamRow class="mb-2">
<AsamText line-clamp="2">
CSS 属性 -webkit-line-clamp<br />
可以限制<br />
内容块的行数。
</AsamText>
</AsamRow>
<AsamRow>
<AsamTooltip content="仅在文本被截断时显示文字提示" :disabled="!textRef?.isTruncated">
<!-- prettier-ignore -->
<AsamText
ref="textRef"
class="w-150px"
truncated
v-bind="domTitleAttrs('')"
>
仅在文字被截断时显示提示
</AsamText>
</AsamTooltip>
</AsamRow>
</template>
<script setup>
defineOptions({ name: 'AsamTextCapTruncatedDemo' });
import { AsamText, AsamRow, AsamTooltip } from '@asam-ui/ui';
import { ref } from 'vue';
const textRef = ref();
const domTitleAttrs = (title) => ({ class: 'ui032-text-title', title });
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.w-150px {
width: 150px;
}
.mb-2 {
margin-bottom: 0.5rem;
}
</style>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>
覆盖
使用属性 tag 覆盖元素
覆盖
vue
<template>
<AsamSpace direction="vertical">
<AsamText>span</AsamText>
<AsamText tag="p">这是一段文字。</AsamText>
<AsamText tag="b">粗体</AsamText>
<AsamText tag="i">斜体</AsamText>
<AsamText>
这是
<AsamText tag="sub" size="small">subscript</AsamText>
</AsamText>
<AsamText>
这是
<AsamText tag="sup" size="small">superscript</AsamText>
</AsamText>
<AsamText tag="ins">已插入</AsamText>
<AsamText tag="del">已删除</AsamText>
<AsamText tag="mark">已标记</AsamText>
</AsamSpace>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTextCapOverrideDemo' });
import { AsamSpace, AsamText } from '@asam-ui/ui';
</script>vue
<template>
<AsamSpace direction="vertical">
<AsamText>span</AsamText>
<AsamText tag="p">这是一段文字。</AsamText>
<AsamText tag="b">粗体</AsamText>
<AsamText tag="i">斜体</AsamText>
<AsamText>
这是
<AsamText tag="sub" size="small">subscript</AsamText>
</AsamText>
<AsamText>
这是
<AsamText tag="sup" size="small">superscript</AsamText>
</AsamText>
<AsamText tag="ins">已插入</AsamText>
<AsamText tag="del">已删除</AsamText>
<AsamText tag="mark">已标记</AsamText>
</AsamSpace>
</template>
<script setup>
defineOptions({ name: 'AsamTextCapOverrideDemo' });
import { AsamSpace, AsamText } from '@asam-ui/ui';
</script>
混合使用
混合使用 Text 组件
混合使用
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamSpace direction="vertical">
<AsamText>
<AsamIcon>
<Grid />
</AsamIcon>
Element-Plus
</AsamText>
<AsamRow>
<AsamText>评分</AsamText>
<AsamRate class="ml-1" />
</AsamRow>
<AsamText>
文字与图标混排
<AsamIcon>
<Bell />
</AsamIcon>
与组件
<AsamButton type="default">按钮</AsamButton>
</AsamText>
</AsamSpace>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTextCapMixedDemo' });
import { AsamSpace, AsamText, AsamIcon, AsamRow, AsamRate, AsamButton } from '@asam-ui/ui';
import { Bell, Grid } from '@asam-ui/icons-vue';
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.ml-1 {
margin-left: 0.25rem;
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<AsamSpace direction="vertical">
<AsamText>
<AsamIcon>
<Grid />
</AsamIcon>
Element-Plus
</AsamText>
<AsamRow>
<AsamText>评分</AsamText>
<AsamRate class="ml-1" />
</AsamRow>
<AsamText>
文字与图标混排
<AsamIcon>
<Bell />
</AsamIcon>
与组件
<AsamButton type="default">按钮</AsamButton>
</AsamText>
</AsamSpace>
</template>
<script setup>
defineOptions({ name: 'AsamTextCapMixedDemo' });
import { AsamSpace, AsamText, AsamIcon, AsamRow, AsamRate, AsamButton } from '@asam-ui/ui';
import { Bell, Grid } from '@asam-ui/icons-vue';
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.ml-1 {
margin-left: 0.25rem;
}
</style>响应式截断状态
组件实例上的 isTruncated 为布尔值，底层响应式 ref 由 Vue 解包。内容、宽度、truncated 和 lineClamp 改变后会重新测量；挂载前实例为空。title 省略时由截断状态生成，显式空字符串关闭自动标题。
响应式截断状态
vue
<template>
<div class="demo-root-layout">
<div class="controls">
<AsamButton
type="default"
native-type="button"
@click="content = content === '短文' ? longText : '短文'"
>
切换内容
</AsamButton>
<AsamButton
type="default"
native-type="button"
@click="width = width === 120 ? 1000 : 120"
>切换宽度</AsamButton
>
<AsamButton type="default" native-type="button" @click="truncated = !truncated"
>切换截断</AsamButton
>
</div>
<AsamText
ref="text"
:truncated="truncated"
:style="{ width: width + 'px', display: 'inline-block' }"
>
{{ content }}
</AsamText>
<output v-bind="domDataAttrs('data-state', 'single')">{{ text?.isTruncated }}</output>
<!-- prettier-ignore -->
<AsamText
ref="multi"
:line-clamp="2"
style="width: 120px"
v-bind="domTitleAttrs('')"
>
{{ content }}
</AsamText>
<output v-bind="domDataAttrs('data-state', 'multi')">{{ multi?.isTruncated }}</output>
</div>
</template>
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue';
defineOptions({ name: 'AsamTextBehaviorDemo' });
import { ref } from 'vue';
import { AsamButton, AsamText } from '@asam-ui/ui';
import type { AsamTextExpose } from '@asam-ui/ui';
const longText = '这是一段超过容器宽度的文字，用于观察内容与宽度变化后真实截断状态是否更新。';
const content = ref(longText);
const width = ref(120);
const truncated = ref(true);
const text = ref<AsamTextExpose>();
const multi = ref<AsamTextExpose>();
type DemoDataAttributes = Record<`data-${string}`, string | number | boolean | null | undefined>;
const domDataAttrs = (
name: `data-${string}`,
value: string | number | boolean | null | undefined = ''
): Pick<HTMLAttributes, 'class'> & DemoDataAttributes => ({
class: 'ui032-data-marker',
[name]: value
});
const domTitleAttrs = (
title: NonNullable<HTMLAttributes['title']>
): Pick<HTMLAttributes, 'class' | 'title'> => ({ class: 'ui032-text-title', title });
</script>
<style scoped>
.controls {
display: flex;
gap: var(--asam-space-sm);
margin-bottom: var(--asam-space-sm);
}
output {
display: block;
}
</style>
<style scoped>
.demo-root-layout {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>vue
<template>
<div class="demo-root-layout">
<div class="controls">
<AsamButton
type="default"
native-type="button"
@click="content = content === '短文' ? longText : '短文'"
>
切换内容
</AsamButton>
<AsamButton
type="default"
native-type="button"
@click="width = width === 120 ? 1000 : 120"
>切换宽度</AsamButton
>
<AsamButton type="default" native-type="button" @click="truncated = !truncated"
>切换截断</AsamButton
>
</div>
<AsamText
ref="text"
:truncated="truncated"
:style="{ width: width + 'px', display: 'inline-block' }"
>
{{ content }}
</AsamText>
<output v-bind="domDataAttrs('data-state', 'single')">{{ text?.isTruncated }}</output>
<!-- prettier-ignore -->
<AsamText
ref="multi"
:line-clamp="2"
style="width: 120px"
v-bind="domTitleAttrs('')"
>
{{ content }}
</AsamText>
<output v-bind="domDataAttrs('data-state', 'multi')">{{ multi?.isTruncated }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTextBehaviorDemo' });
import { ref } from 'vue';
import { AsamButton, AsamText } from '@asam-ui/ui';
const longText = '这是一段超过容器宽度的文字，用于观察内容与宽度变化后真实截断状态是否更新。';
const content = ref(longText);
const width = ref(120);
const truncated = ref(true);
const text = ref();
const multi = ref();
const domDataAttrs = (name, value = '') => ({ class: 'ui032-data-marker', [name]: value });
const domTitleAttrs = (title) => ({ class: 'ui032-text-title', title });
</script>
<style scoped>
.controls {
display: flex;
gap: var(--asam-space-sm);
margin-bottom: var(--asam-space-sm);
}
output {
display: block;
}
</style>
<style scoped>
.demo-root-layout {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>API
属性 AsamTextProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
type | 类型 | enum"" | "primary" | "success" | "danger" | "warning" | "info"完整类型："" | "primary" | "success" | "danger" | "warning" | "info" | undefined | — |
tag | 自定义元素标签 | string | undefined | — |
truncated | 显示省略号 | boolean | undefined | false |
lineClamp | 最大行数 | string | number | undefined | — |
size | 大小 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
插槽 AsamTextSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (() => VNode[]) | undefined | — |
事件 AsamTextEmits
实例方法与状态 AsamTextExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
isTruncated | 文字是否被截断。 | boolean | — |
类型 AsamTextInstance
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
isTruncated | 文字是否被截断。 | boolean | — |
类型 AsamTextPropsPublic
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
type | — | enum"" | "primary" | "success" | "danger" | "warning" | "info"完整类型：(AsamTextPropsPublic)["type"] | — |
tag | — | string | undefined | — |
truncated | — | boolean | undefined | — |
lineClamp | — | (AsamTextPropsPublic)["lineClamp"] | — |
size | — | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
关联组件
参数与事件补充说明
完整基础 API，并支持 ASAM 四档尺寸继承。
参数与事件说明
type
必填：否；声明来源：上游声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "primary" / "success" / "danger" / "warning" / "info"
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
tag
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：span（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'span'（2.14.7；源码事实，未作为 ASAM 运行实测）
truncated
必填：否；声明来源：上游声明。
truncated 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
lineClamp
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
AsamTextProps 公开类型视图
ts
import type { AsamTextProps, AsamTextareaProps, AsamControlSize } from '@asam-ui/ui';
// AsamTextProps
type PublicContract = {
"type"?: "" | "primary" | "success" | "danger" | "warning" | "info" | undefined;
"tag"?: string | undefined;
"truncated"?: boolean | undefined;
"lineClamp"?: string | number | undefined;
"size"?: AsamControlSize | undefined;
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>[]
AsamTextSlots 公开类型视图
ts
import type { VNode } from 'vue';
import type { AsamTextSlots } from '@asam-ui/ui';
// AsamTextSlots
type PublicContract = {
"default"?: (() => VNode[]) | undefined;
};AsamTextEmits 公开类型视图
ts
import type { AsamTextEmits } from '@asam-ui/ui';
// AsamTextEmits
type PublicContract = AsamTextEmits;渲染文本的响应式截断状态，在公开 Vue 实例上解包。
参数与事件说明
isTruncated
必填：是；声明来源：上游声明。
isTruncated 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
AsamTextExpose 公开类型视图
ts
import type { AsamTextExpose, AsamTextareaExpose } from '@asam-ui/ui';
// AsamTextExpose
type PublicContract = {
"isTruncated": boolean;
};参数与事件说明
isTruncated
必填：是；声明来源：上游声明。
isTruncated 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
AsamTextInstance 公开类型视图
ts
import type { AsamTextInstance, AsamTextareaExpose } from '@asam-ui/ui';
// AsamTextInstance
type PublicContract = {
"isTruncated": boolean;
};用于回调、渲染器数据和组件专用配置的具名基础类型。
参数与事件说明
type
必填：否；声明来源：上游声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "primary" / "success" / "danger" / "warning" / "info"
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
tag
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：'span'（2.14.7；源码事实，未作为 ASAM 运行实测）
truncated
必填：否；声明来源：上游声明。
truncated 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
lineClamp
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
AsamTextPropsPublic 公开类型视图
ts
import type { AsamTextPropsPublic, AsamTextareaProps, AsamControlSize } from '@asam-ui/ui';
// AsamTextPropsPublic
type PublicContract = {
readonly "type"?: (AsamTextPropsPublic)["type"];
readonly "tag"?: string | undefined;
readonly "truncated"?: boolean | undefined;
readonly "lineClamp"?: (AsamTextPropsPublic)["lineClamp"];
"size"?: AsamControlSize | undefined;
};