mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
小莫唐尼
152 lines
2.7 KiB
Markdown
152 lines
2.7 KiB
Markdown
# text 组件示例
|
||
|
||
## 官方文档
|
||
|
||
参考官方文档：https://uniapp.dcloud.net.cn/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://uniapp.dcloud.net.cn/component/text.html
|