text

文本，文本内容写在标签内容区

基础示例

完整单页示例，可直接替换 BlueOS Studio 模板工程的首页 index.ux 运行。文本内容写在 <text> 标签的内容区，支持通过 {{ }} 绑定 data 中的字段；lines 与 text-overflow 是样式，需要写在 <style> 中。

<script>
  export default {
    data: {
      title: '文本组件示例',
      count: 0,
    },
    addCount() {
      this.count = this.count + 1
    },
  }
</script>

<template>
  <div class="flex flex-col items-center justify-center w-full h-full">
    <text class="text-white text-4xl">{{ title }}</text>
    <text class="text-white text-2xl mt-20">已点击 {{ count }} 次</text>
    <text class="summary text-white text-2xl mt-20">超出两行的文本会以省略号结尾，这段文案用于演示 lines 与 text-overflow 的配合效果。</text>
    <input class="text-white mt-20" type="button" value="点击计数" onclick="addCount" />
  </div>
</template>

<style>
@tailwind utilities;

.summary {
  width: 80%;
  lines: 2;
  text-overflow: ellipsis;
}
</style>

参与绑定的字段必须先在 data 中声明，否则视图不会更新。

子组件

支持

属性

支持通用属性

样式

支持通用样式

名称	类型	默认值	必填	描述
min-width	<length> | <percentage>	-	否	指定元素的最小宽度
min-height	<length> | <percentage>	-	否	指定元素的最小高度
max-width	<length> | <percentage>	-	否	指定元素的最大宽度
max-height	<length> | <percentage>	-	否	指定元素的最大高度
lines	<number>	-1	否	文本行数，-1 代表不限定行数
color	<color>	#757575	否	文本颜色
font-size	<length>	30px	否	文本尺寸
font-weight	normal | bold | lighter | border |	normal	否	当前平台仅支持 normal 与 bold 两种效果
text-decoration	underline | line-through | none	none	否	用于设置文本的修饰线外观
text-align	left | center | right	left	否	文本的水平对齐方式。
line-height	<length>	-	否	行高设置
text-overflow	clip | ellipsis	clip	否	在设置了行数的情况下生效

事件

支持通用事件