refactor: 架构升级

2026-09-13 00:50:40 +08:00 · 2026-08-31 07:58:23 +08:00
commit ba5b77568b
693 changed files with 118430 additions and 0 deletions
@@ -0,0 +1,151 @@
+# text 组件示例
+
+## 官方文档
+
+参考官方文档：https://doc.dcloud.net.cn/uni-app-x/component/text.html
+
+## 概述
+
+`text` 是文本组件，用于显示文本内容。
+
+## 基础用法
+
+```vue
+<template>
+  <text>这是一段文本</text>
+</template>
+```
+
+## 完整示例
+
+### 示例 1: 基本文本
+
+```vue
+<template>
+  <view class="container">
+    <text>普通文本</text>
+    <text class="bold-text">加粗文本</text>
+    <text class="colored-text">彩色文本</text>
+  </view>
+</template>
+
+<style>
+.bold-text {
+  font-weight: bold;
+}
+.colored-text {
+  color: #007aff;
+}
+</style>
+```
+
+### 示例 2: 文本嵌套
+
+```vue
+<template>
+  <view class="container">
+    <text>
+      这是一段
+      <text class="highlight">高亮</text>
+      文本
+    </text>
+  </view>
+</template>
+
+<style>
+.highlight {
+  color: #ff3b30;
+  font-weight: bold;
+}
+</style>
+```
+
+### 示例 3: 文本选择
+
+```vue
+<template>
+  <view class="container">
+    <text selectable>这段文本可以选择</text>
+    <text :selectable="false">这段文本不可选择</text>
+  </view>
+</template>
+```
+
+### 示例 4: 文本换行
+
+```vue
+<template>
+  <view class="container">
+    <text class="text-wrap">
+      这是一段很长的文本，会自动换行显示。这是一段很长的文本，会自动换行显示。
+    </text>
+  </view>
+</template>
+
+<style>
+.text-wrap {
+  width: 300px;
+  word-wrap: break-word;
+}
+</style>
+```
+
+### 示例 5: 文本样式
+
+```vue
+<template>
+  <view class="container">
+    <text class="text-style">样式文本</text>
+    <text class="text-decoration">装饰文本</text>
+    <text class="text-shadow">阴影文本</text>
+  </view>
+</template>
+
+<style>
+.text-style {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+}
+.text-decoration {
+  text-decoration: underline;
+  color: #007aff;
+}
+.text-shadow {
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+</style>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| selectable | Boolean | false | 文本是否可选 |
+| user-select | Boolean | false | 文本是否可选（H5） |
+| space | String | - | 显示连续空格 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. `text` 组件内只能嵌套 `text` 组件
+2. `selectable` 属性用于控制文本是否可选择
+3. 文本样式通过 CSS 控制
+4. 建议使用 `text` 组件而不是直接在 `view` 中写文本
+
+## 参考资源
+
+- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/component/text.html