text.md 3.6 KB
Newer Older
M
mehaotian 已提交
1
#### text
W
wanganxp 已提交
2 3 4
文本组件。

用于包裹文本内容。
M
mehaotian 已提交
5 6 7 8 9

**属性说明**

|属性名		|类型	|默认值	|说明			|平台差异说明				|
|:-|:-			|:-		|:-		|:-				|:-						|
D
DaYuan08 已提交
10 11
|selectable	|Boolean|false	|文本是否可选	|	App、H5	|
|user-select	|Boolean|false	|文本是否可选	| 微信小程序 |
雪洛's avatar
雪洛 已提交
12 13
|space		|String	|		|显示连续空格	|App、H5、微信小程序	|
|decode		|Boolean|false	|是否解码		|App、H5、微信小程序	|
M
mehaotian 已提交
14 15 16 17 18 19 20 21 22 23 24

**space 值说明**

|值|说明|
|:-|:-|
|ensp|中文字符空格一半大小|
|emsp|中文字符空格大小|
|nbsp|根据字体设置的空格大小|

**Tips**

W
wanganxp 已提交
25 26
- `<text>` 组件内只支持嵌套 `<text>`,不支持其它组件或自定义组件,否则会引发在不同平台的渲染差异。
- 在app-nvue下,只有`<text>`才能包裹文本内容。无法在`<view>`组件包裹文本。
M
mehaotian 已提交
27 28 29 30 31 32
- decode 可以解析的有 `&nbsp;` `&lt;` `&gt;` `&amp;` `&apos;` `&ensp;` `&emsp;`
- 各个操作系统的空格标准并不一致。
- 除了文本节点以外的其他节点都无法长按选中。
- 支持 `\n` 方式换行。
- 如果使用 `<span>` 组件编译时会被转换为 `<text>`

雪洛's avatar
雪洛 已提交
33
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/text/text)
W
wanganxp 已提交
34 35

以下示例代码,来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp),推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
M
mehaotian 已提交
36
```html
W
wanganxp 已提交
37
<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
M
mehaotian 已提交
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="text-box" scroll-y="true">
				<text>{{text}}</text>
			</view>
			<view class="uni-btn-v">
				<button type="primary" :disabled="!canAdd" @click="add">add line</button>
				<button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
			</view>
		</view>
	</view>
</template>
```
```javascript
export default {
    data() {
        return {
            texts: [
W
wanganxp 已提交
57
                'HBuilder,500万开发者选择的IDE',
M
mehaotian 已提交
58 59 60 61 62
                'MUI,轻巧、漂亮的前端开源框架',
                'wap2app,M站快速转换原生体验的App',
                '5+Runtime,为HTML5插上原生的翅膀',
                'HBuilderX,轻巧、极速,极客编辑器',
                'uni-app,终极跨平台方案',
W
wanganxp 已提交
63
                'HBuilder,500万开发者选择的IDE',
M
mehaotian 已提交
64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
                'MUI,轻巧、漂亮的前端开源框架',
                'wap2app,M站快速转换原生体验的App',
                '5+Runtime,为HTML5插上原生的翅膀',
                'HBuilderX,轻巧、极速,极客编辑器',
                'uni-app,终极跨平台方案',
                '......'
            ],
            text: '',
            canAdd: true,
            canRemove: false,
            extraLine: []
        }
    },
    methods: {
        add: function(e) {
            this.extraLine.push(this.texts[this.extraLine.length % 12]);
            this.text = this.extraLine.join('\n');
            this.canAdd = this.extraLine.length < 12;
            this.canRemove = this.extraLine.length > 0;
        },
        remove: function(e) {
            if (this.extraLine.length > 0) {
                this.extraLine.pop();
                this.text = this.extraLine.join('\n');
                this.canAdd = this.extraLine.length < 12;
                this.canRemove = this.extraLine.length > 0;
            }
        }
    }
}

```

97
![uniapp](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/245b9110-4f2f-11eb-97b7-0dc4655d6e68.png)