文本
用于展示一行或多行文本内容的组件。
基础用法
通过标签 NueText
使用文本组件。
大小
通过属性 size
修改文本大小。属性类型为 string
,可选值有 xs
、sm
、md
、lg
、xl
、xxl
以及 CSS 大小值。
<template>
<nue-div align="center">
<nue-text size="sm">sm</nue-text>
<nue-text size="16px">16px</nue-text>
<nue-text size="var(--custom-size)">CustomSize</nue-text>
</nue-div>
</template>
<style scoped>
.nue-text {
--custom-size: 1.5rem;
}
</style>
颜色
通过属性 color
修改文本颜色。属性类型为 string
,支持 CSS color
属性值。
<template>
<nue-div>
<nue-text color="red">红色</nue-text>
<nue-text color="#00FF00">绿色</nue-text>
<nue-text color="var(--custom-color)">蓝色</nue-text>
</nue-div>
</template>
<style scoped>
.nue-text {
--custom-color: rgb(0, 0, 255);
}
</style>
粗细
通过属性 weight
修改文本粗细。属性类型为 string
,支持 CSS font-weight
属性值。
<template>
<nue-div align="center">
<nue-text weight="200">200</nue-text>
<nue-text weight="bold">bold</nue-text>
<nue-text weight="var(--custom-weight)">CustomWeight</nue-text>
</nue-div>
</template>
<style scoped>
.nue-text {
--custom-weight: 900;
}
</style>
装饰
通过属性 decoration
修改文本装饰。属性类型为 string
,支持 CSS text-decoration
属性值。
<template>
<nue-div align="center">
<nue-text decoration="underline">下划线</nue-text>
<nue-text decoration="line-through">删除线</nue-text>
<nue-text decoration="var(--custom-decoration)">上划线</nue-text>
</nue-div>
</template>
<style scoped>
.nue-text {
--custom-decoration: overline;
}
</style>
标签变更
通过属性 tag
修改渲染时的元素标签。默认为 <span>
标签。
<template>
<nue-div align="center">
<nue-text tag="h1">一级标题(h1)</nue-text>
<nue-text tag="p">段落(p)</nue-text>
<nue-text tag="b">粗体(b)</nue-text>
</nue-div>
</template>
文本溢出
通过属性 clamped
设置文本溢出时是否显示省略号。属性类型为 number
,表示显示省略号并限制显示的行数,默认为未定义。
<template>
<nue-div vertical>
<nue-button @click="handleClick">{{ isClamped ? '禁用' : '启用' }}溢出隐藏</nue-button>
<nue-text :clamped="isClamped">
文本可显示的最大行数。当内容超过设置值则会隐藏超出的内容,并显示省略号。(填充文本:在那遥远而神秘的夜晚,
星辰如同细碎的钻石,点缀着深邃的天幕。微风轻拂,带着一丝丝凉爽和花香,仿佛能穿透心灵的每一个角落。
魔法在空气中悄然弥漫,每一盏路灯都似乎拥有了自己的故事,静静地诉说着过往与未来。)
</nue-text>
</nue-div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const isClamped = ref(0);
const handleClick = () => {
isClamped.value = isClamped.value ? 0 : 2;
};
</script>