提交 559d9ad7 编写于 作者: Anne_LXM's avatar Anne_LXM

Update text.md

上级 9867a6db
#### text #### text
文本组件。 文本组件。
用于包裹文本内容。 用于包裹文本内容。
**属性说明** **属性说明**
|属性名 |类型 |默认值 |说明 |平台差异说明 | |属性名 |类型 |默认值 |说明 |平台差异说明 |
|:-|:- |:- |:- |:- |:- | |:-|:- |:- |:- |:- |
|selectable |Boolean|false |文本是否可选 | App、H5、快手小程序 | |selectable |Boolean|false |文本是否可选 | |
|user-select |Boolean|false |文本是否可选 | 微信小程序 | |user-select |Boolean|false |文本是否可选 | 微信小程序 |
|space |String | |显示连续空格 |App、H5、微信小程序 | |space |String | |显示连续空格 |钉钉小程序不支持 |
|decode |Boolean|false |是否解码 |App、H5、微信小程序 | |decode |Boolean|false |是否解码 |百度、钉钉小程序不支持 |
**space 值说明** **space 值说明**
|值|说明| |值|说明|
|:-|:-| |:-|:-|
|ensp|中文字符空格一半大小| |ensp|中文字符空格一半大小|
|emsp|中文字符空格大小| |emsp|中文字符空格大小|
|nbsp|根据字体设置的空格大小| |nbsp|根据字体设置的空格大小|
**Tips** **Tips**
- `<text>` 组件内只支持嵌套 `<text>`,不支持其它组件或自定义组件,否则会引发在不同平台的渲染差异。 - `<text>` 组件内只支持嵌套 `<text>`,不支持其它组件或自定义组件,否则会引发在不同平台的渲染差异。
- 在app-nvue下,只有`<text>`才能包裹文本内容。无法在`<view>`组件包裹文本。 - 在app-nvue下,只有`<text>`才能包裹文本内容。无法在`<view>`组件包裹文本。
- decode 可以解析的有 `&nbsp;` `&lt;` `&gt;` `&amp;` `&apos;` `&ensp;` `&emsp;` - decode 可以解析的有 `&nbsp;` `&lt;` `&gt;` `&amp;` `&apos;` `&ensp;` `&emsp;`
- 各个操作系统的空格标准并不一致。 - 各个操作系统的空格标准并不一致。
- 除了文本节点以外的其他节点都无法长按选中。 - 除了文本节点以外的其他节点都无法长按选中。
- 支持 `\n` 方式换行。 - 支持 `\n` 方式换行。
- 如果使用 `<span>` 组件编译时会被转换为 `<text>` - 如果使用 `<span>` 组件编译时会被转换为 `<text>`
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/text/text) **示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/text/text)
以下示例代码,来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp),推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。 以下示例代码,来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp),推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
::: preview https://hellouniapp.dcloud.net.cn/pages/component/text/text ::: preview https://hellouniapp.dcloud.net.cn/pages/component/text/text
> Template > Template
```vue ```vue
<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 --> <!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<template> <template>
<view> <view>
<view class="uni-padding-wrap uni-common-mt"> <view class="uni-padding-wrap uni-common-mt">
<view class="text-box" scroll-y="true"> <view class="text-box" scroll-y="true">
<text>{{text}}</text> <text>{{text}}</text>
</view> </view>
<view class="uni-btn-v"> <view class="uni-btn-v">
<button type="primary" :disabled="!canAdd" @click="add">add line</button> <button type="primary" :disabled="!canAdd" @click="add">add line</button>
<button type="warn" :disabled="!canRemove" @click="remove">remove line</button> <button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
``` ```
> Script > Script
```vue ```vue
<script> <script>
export default { export default {
data() { data() {
return { return {
texts: [ texts: [
'HBuilder,500万开发者选择的IDE', 'HBuilder,500万开发者选择的IDE',
'MUI,轻巧、漂亮的前端开源框架', 'MUI,轻巧、漂亮的前端开源框架',
'wap2app,M站快速转换原生体验的App', 'wap2app,M站快速转换原生体验的App',
'5+Runtime,为HTML5插上原生的翅膀', '5+Runtime,为HTML5插上原生的翅膀',
'HBuilderX,轻巧、极速,极客编辑器', 'HBuilderX,轻巧、极速,极客编辑器',
'uni-app,终极跨平台方案', 'uni-app,终极跨平台方案',
'HBuilder,500万开发者选择的IDE', 'HBuilder,500万开发者选择的IDE',
'MUI,轻巧、漂亮的前端开源框架', 'MUI,轻巧、漂亮的前端开源框架',
'wap2app,M站快速转换原生体验的App', 'wap2app,M站快速转换原生体验的App',
'5+Runtime,为HTML5插上原生的翅膀', '5+Runtime,为HTML5插上原生的翅膀',
'HBuilderX,轻巧、极速,极客编辑器', 'HBuilderX,轻巧、极速,极客编辑器',
'uni-app,终极跨平台方案', 'uni-app,终极跨平台方案',
'......' '......'
], ],
text: '', text: '',
canAdd: true, canAdd: true,
canRemove: false, canRemove: false,
extraLine: [] extraLine: []
} }
}, },
methods: { methods: {
add: function(e) { add: function(e) {
this.extraLine.push(this.texts[this.extraLine.length % 12]); this.extraLine.push(this.texts[this.extraLine.length % 12]);
this.text = this.extraLine.join('\n'); this.text = this.extraLine.join('\n');
this.canAdd = this.extraLine.length < 12; this.canAdd = this.extraLine.length < 12;
this.canRemove = this.extraLine.length > 0; this.canRemove = this.extraLine.length > 0;
}, },
remove: function(e) { remove: function(e) {
if (this.extraLine.length > 0) { if (this.extraLine.length > 0) {
this.extraLine.pop(); this.extraLine.pop();
this.text = this.extraLine.join('\n'); this.text = this.extraLine.join('\n');
this.canAdd = this.extraLine.length < 12; this.canAdd = this.extraLine.length < 12;
this.canRemove = this.extraLine.length > 0; this.canRemove = this.extraLine.length > 0;
} }
} }
} }
} }
</script> </script>
``` ```
::: :::
**注意事项** **注意事项**
- nvue 样式 `word-wrap` 在 Android 平台暂不支持 - nvue 样式 `word-wrap` 在 Android 平台暂不支持
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册