文本 Text
显示文本,不过因为 ES 下没有 display: inline 的显示模式,默认全部都是 flex 的。
基础用法
点击查看源码
vue
<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
- 超过指定行数的文字会被直接截断,不显示“...”,