Text

文本的常见操作

基本用法

由 type 属性来选择 Text 的类型

默认文本主要文本成功文本警告文本危险文本信息文本

显示代码

<template>
	<div class="text-content text-basic">
		<div class="text-basic-default">
			<ued-text
				v-for="(item, index) in textType"
				:key="index"
				:type="item.type"
			>
				{{ item.text }}
			</ued-text>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const textType = ref([
	{ type: '', text: '默认文本' },
	{ type: 'primary', text: '主要文本' },
	{ type: 'success', text: '成功文本' },
	{ type: 'warning', text: '警告文本' },
	{ type: 'danger', text: '危险文本' },
	{ type: 'info', text: '信息文本' },
])
</script>

尺寸

使用 size 属性配置尺寸，可选的尺寸大小有: large, default 或 small

默认文本默认文本默认文本

显示代码

<template>
	<div class="common-content text-content text-size">
		<div class="text-size-default">
			<ued-text size="large">默认文本</ued-text>
			<ued-text>默认文本</ued-text>
			<ued-text size="small">默认文本</ued-text>
		</div>
	</div>
</template>

省略

通过 truncated 属性，在文本超过视图或最大宽度设置时展示省略符。 通过 line-clamp 属性控制多行的样式

默认文本默认文本默认文本默认文本

默认文本默认文本默认文本默认文本
默认文本默认文本默认文本默认文本
默认文本默认文本默认文本默认文本

显示代码

<template>
	<div class="text-content text-truncated">
		<div class="text-truncated-default">
			<ued-text class="single-line" truncated>
				默认文本默认文本默认文本默认文本
			</ued-text>
		</div>
		<div class="text-truncated-line-clamp">
			<ued-text class="multiple-line" line-clamp="2">
				默认文本默认文本默认文本默认文本 <br />
				默认文本默认文本默认文本默认文本 <br />
				默认文本默认文本默认文本默认文本
			</ued-text>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.single-line,
.multiple-line {
	width: 150px;
}
</style>

Tag

使用属性 tag 覆盖元素

span

p

bold

Italic

This is _subscript

This is ^superscript

Inserted

Deleted

Marked

显示代码

<template>
	<div class="text-tag-span">
		<ued-text>span</ued-text>
	</div>
	<div class="text-tag-p">
		<ued-text tag="p">p</ued-text>
	</div>
	<div class="text-tag-b">
		<ued-text tag="b">bold</ued-text>
	</div>
	<div class="text-tag-i">
		<ued-text tag="i">Italic</ued-text>
	</div>
	<div class="text-tag-sub">
		<ued-text>
			This is
			<ued-text tag="sub" size="small">subscript</ued-text>
		</ued-text>
	</div>
	<div class="text-tag-sup">
		<ued-text>
			This is
			<ued-text tag="sup" size="small">superscript</ued-text>
		</ued-text>
	</div>
	<div class="text-tag-ins">
		<ued-text tag="ins">Inserted</ued-text>
	</div>
	<div class="text-tag-del">
		<ued-text tag="del">Deleted</ued-text>
	</div>
	<div class="text-tag-mark">
		<ued-text tag="mark">Marked</ued-text>
	</div>
</template>

混合使用

混合使用 Text 组件

Plus

This is text mixed icon and component

显示代码

<template>
<div class="common-content text-content text-mixin">
  <div class="text-mixin-button">
    <ued-text>
      <ued-icon>
        <Plus />
      </ued-icon>
      Plus
    </ued-text>
  </div>
  <div class="text-mixin-more">
    <ued-text>
      This is text mixed icon
      <ued-icon>
        <Plus />
      </ued-icon>
      and component
      <ued-button>Button</ued-button>
    </ued-text>
  </div>
</template>

API

属性

属性名	说明	类型	默认值
size	尺寸	large/default/small	-
type	类型	default/success/warning/danger/info	-
truncated	显示省略号	boolean	false
line-clamp	最大行数	string/number	-
tag	自定义元素标签	string	span

插槽

插槽名	说明
defalut	自定义默认内容