文本组件

text 组件是 Uniapp 中用于包裹和显示文本的基础组件。在 app-nvue 和 app-uvue 环境中，文本必须放置在 text 组件内，不能直接放置在 view 组件中，以避免样式继承问题。而在其他平台（如 H5、微信小程序等）中，text 组件也是主要的文本展示方式，能够确保文本内容在多平台间的一致性。

1. 什么是 text 组件？

text 组件是用于显示和包裹文本的基础组件，适用于展示静态文本内容。特别是在多端开发中，text 组件的使用可以确保文本在各个平台上的样式和行为表现一致，避免不同平台之间的样式差异问题。

使用场景

• 静态文本展示：用于展示段落、标签等静态文本内容。
• 多端文本适配：在 app-nvue 环境中，必须通过 text 组件包裹文本，以确保样式能够正常继承和展示。
• 动态文本更新：结合数据绑定和事件监听，实现动态文本的展示、更新和修改。

2. text 组件的常用属性

text 组件提供了灵活的属性，允许开发者控制文本是否可选、显示空格的方式以及是否支持 HTML 字符的解码。以下是一些常用属性：

属性名	类型	默认值	说明	平台差异说明
selectable	Boolean	false	是否允许用户选择文本	无
user-select	Boolean	false	是否允许用户选择文本（微信小程序专属）	仅微信小程序支持
space	String	无	是否显示连续空格，支持 ensp, emsp, nbsp 三种空格类型	钉钉小程序不支持
decode	Boolean	false	是否解码 HTML 转义字符，如  , < 等	百度、钉钉小程序不支持

2.1 显示连续空格 space

• 说明：通过 space 属性控制如何显示连续的空格符，支持以下三种模式：
  • ensp：中文字符宽度的一半。
  • emsp：中文字符宽度。
  • nbsp：根据字体设置的标准空格大小。

<template>
  <text space="nbsp">你好，世界！&nbsp;&nbsp;你好，Uniapp！</text>
</template>

2.2 解码 HTML 实体字符 decode

• 说明：decode 属性用于解码 HTML 实体字符，比如 <, >, & 等。这在展示从富文本或其他编码格式中获取的内容时非常有用。

<template>
  <text :decode="true">&lt;div&gt;Hello World!&lt;/div&gt;</text>
</template>

3. 动态添加和移除文本案例

以下案例展示了 text 组件的实际使用，通过按钮控制文本的添加和移除，并实现换行效果。该示例使用 Vue3 语法，并通过 text 组件包裹动态更新的文本内容。

<template>
  <view class="container">
    <!-- 包裹文本的 text 组件 -->
    <view class="text-box">
      <text>{{ text }}</text>
    </view>

    <!-- 控制添加和移除文本的按钮 -->
    <view class="button-group">
      <button type="primary" :disabled="!canAdd" @click="addLine">添加一行</button>
      <button type="warn" :disabled="!canRemove" @click="removeLine">移除一行</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 定义文本内容和操作控制
const texts = [
  'HBuilder，900万开发者选择的IDE',
  'MUI，轻巧、漂亮的前端开源框架',
  'wap2app，M站快速转换原生体验的App',
  '5+Runtime，为HTML5插上原生的翅膀',
  'HBuilderX，轻巧、极速，极客编辑器',
  'uni-app，终极跨平台方案'
]
const extraLine = ref([]) // 额外添加的文本行
const text = ref('') // 当前显示的文本
const canAdd = ref(true) // 是否可以继续添加文本
const canRemove = ref(false) // 是否可以移除文本

// 添加一行文本
const addLine = () => {
  extraLine.value.push(texts[extraLine.value.length % texts.length])
  text.value = extraLine.value.join('\n')
  canAdd.value = extraLine.value.length < texts.length
  canRemove.value = extraLine.value.length > 0
}

// 移除一行文本
const removeLine = () => {
  if (extraLine.value.length > 0) {
    extraLine.value.pop()
    text.value = extraLine.value.join('\n')
    canAdd.value = extraLine.value.length < texts.length
    canRemove.value = extraLine.value.length > 0
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.text-box {
  border: 1px solid #ccc;
  padding: 10px;
  height: 200px;
  overflow-y: scroll;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
</style>

代码解析

1. text 组件的使用：

   • text 组件用来包裹文本内容，通过 Vue3 的数据绑定动态更新显示内容，并使用 \n 实现换行效果。

2. 按钮控制文本的动态添加与移除：

   • 通过 addLine 和 removeLine 方法，分别控制文本的添加和移除。按钮根据当前文本的行数进行禁用或启用操作，确保用户操作的流畅性。

3. 样式设计：

   • text-box 设置了边框和滚动区域，用于展示超出高度的文本内容。
   • button-group 使用 flex 布局，使两个按钮在页面上水平排列，保持整洁的布局风格。