在app-nvue下,只有<text>
才能包裹文本内容。无法在<view>
组件包裹文本
decode 可以解析的有
<
>
&
'
 
 
<text>
组件内只支持嵌套 <text>
支持 \n
方式换行
如果使用 <span>
组件编译时会被转换为 <text>
除了文本节点以外的其他节点都无法长按选中
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
---|---|---|---|---|
selectable | Boolean | false | 文本是否可选 | App、H5 |
user-select | Boolean | false | 文本是否可选 | 微信小程序 |
space | String | 显示连续空格 | App、H5、微信小程序 | |
decode | Boolean | false | 是否解码 | App、H5、微信小程序 |
space 值说明
值 | 说明 |
---|---|
ensp | 中文字符空格一半大小 |
emsp | 中文字符空格大小 |
nbsp | 根据字体设置的空格大小 |
<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>
export default {
data() {
return {
texts: [
'HBuilder,500万开发者选择的IDE',
'MUI,轻巧、漂亮的前端开源框架',
'wap2app,M站快速转换原生体验的App',
'5+Runtime,为HTML5插上原生的翅膀',
'HBuilderX,轻巧、极速,极客编辑器',
'uni-app,终极跨平台方案',
'HBuilder,500万开发者选择的IDE',
'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;
}
}
}
}