文本 Text

显示文本，不过因为 ES 下没有 display: inline 的显示模式，默认全部都是 flex 的。

基础用法

点击查看源码

TypeScript

<script lang="ts">
import {defineComponent} from 'vue';

export default defineComponent({
	setup() {
		// ...
	},
});
</script>
<style lang="css" scoped>
.qt-text {
	font-size: 88px;
	color: aqua;
}
</style>
<template>
	<qt-text
		class="qt-text"
		text="文本标签"
	></qt-text>
</template>

属性

参数	描述	类型
numberOfLines	用来当文本过长的时候裁剪文本。包括折叠产生的换行在内，总的行数不会超过这个属性的限制。	number
opacity	配置 Text 的透明度	number
style	-	Tsext Styles
*ellipsizeMode	当设定了 numberOfLines 值后，这个参数指定了字符串如何被截断。所以，在使用 ellipsizeMode 时，必须得同时指定 numberOfLines 数值。	enum(head, middle, tail, clip)
*showOnState	根据状态设置是否可见	enum

• showOnState 相应焦点状态时显示，三个状态一组使用。
• normal: string - 正常 ；
• focused: string - 焦点 ；
• selected: string - 选中，在ul组件中生效，移出ul时触发，如果不需要selected状态，ul标签中添加:enableSelectOnFocus="false" ；

• ellipsizeMode 的参数含义：
• head - 文字将会从头开始截断，保证字符串的最后的文字可以正常显示在 Text 组件的最后，而从开头给截断的文字，将以 “...” 代替，例如 “...wxyz”；
• middle - "文字将会从中间开始截断，保证字符串的最后与最前的文字可以正常显示在Text组件的响应位置，而中间给截断的文字，将以 “...” 代替，例如 “ab...yz”
• tail - 文字将会从最后开始截断，保证字符串的最前的文字可以正常显示在 Text 组件的最前，而从最后给截断的文字，将以 “...” 代替，例如 “abcd...”；
• clip - 超过指定行数的文字会被直接截断，不显示“...”，