文本组件 TextView

文本组件，封装系统自有的文本组件，较qt-text更丰富的功能。主要用来实现展示文本及文本滚动。

基础用法

点击查看源码

TypeScript

<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
	setup() {
		// ...
	},
});
</script>
<style lang="css">
.text-view {
	width: 400px;
	height: 120px;
	color: aqua;
	background-color: rgba(255, 255, 255, 0.2);
	margin-top: 30px;
}
</style>
<template>
	<text-view
		text="text-view标签"
		class="text-view"
		gravity="centerVertical|left"
		:fontSize="44"
		:ellipsizeMode="2"
		:paddingRect="[16, 0, 0, 0]"
	/>
</template>

属性

参数	描述	类型
fontSize	文本大小	int
text	文本内容，内容中加入font标签可设置不用样式文字	int
*ellipsizeMode	文本超出范围后的显示方式	int
lines	文本展示行数	int
maxLines	文本展示最大行数	int
color	文本颜色	string
:paddingRect	设置内边距 顺序：[left,top,right,bottom]	Array
select	设置选中状态，当ellipsizeMode设置为marquee时，若此值为true，可实现一直滚动	boolean
*gravity	设置对齐方式	string
*showOnState	根据状态设置是否可见	enum

• ellipsizeMode 的参数含义:
  • 0：文字将会从头开始截断，保证字符串的最后的文字可以正常显示在 Text 组件的最后，而从开头给截断的文字，将以 “...” 代替，例如 “...wxyz”；
  • 1："文字将会从中间开始截断，保证字符串的最后与最前的文字可以正常显示在Text组件的响应位置，而中间给截断的文字，将以 “...” 代替，例如 “ab...yz”
  • 2：文字将会从最后开始截断，保证字符串的最前的文字可以正常显示在 Text 组件的最前，而从最后给截断的文字，将以 “...” 代替，例如 “abcd...”；
  • 3：以滚动的方式显示,注意 当获得焦点时或者:select="true"时滚动；
• gravity 的参数含义:
  • center : 居中
  • top ： 居上
  • bottom ：居下
  • end ：居尾部
  • centerHorizontal ：水平居中
  • centerVertical ：垂直居中
  • start ：居前

注意gravity可通过|的方式添加多种对齐方式，比如:centerHorizontal|bottom 实现水平居中，并且垂直居下.

示例：

<text-view class="text-view" :focusable=false :select="true" maxLines="1" ellipsizeMode="3">这是超出后可以滚动的文本这是超出后可以滚动的文本
</text-view>
<text-view class="text-view" text='<font color="#fa668e">颜色</font>普通文字'></text-view>

• showOnState 相应焦点状态时显示，三个状态一组使用。

• normal: string - 正常 ；
• focused: string - 焦点 ；
• selected: string - 选中，在ul组件中生效，移出ul时触发，如果不需要selected状态，ul标签中添加:enableSelectOnFocus="false" ；