text

文本。

属性说明

属性名类型默认值说明平台差异说明
selectableBooleanfalse文本是否可选
spaceString显示连续空格5+APP、H5、微信小程序
decodeBooleanfalse是否解码5+APP、H5、微信小程序

space 值说明

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

Tips

  • <text> 组件内只支持嵌套 <text>，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。。
  • decode 可以解析的有 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;。
  • 各个操作系统的空格标准并不一致。
  • 除了文本节点以外的其他节点都无法长按选中。
  • 支持 \n 方式换行。
  • 如果使用 <span> 组件编译时会被转换为 <text>。示例
  1. <template>
  2.     <view>
  3.         <view class="uni-padding-wrap uni-common-mt">
  4.             <view class="text-box" scroll-y="true">
  5.                 <text>{{text}}</text>
  6.             </view>
  7.             <view class="uni-btn-v">
  8.                 <button type="primary" :disabled="!canAdd" @click="add">add line</button>
  9.                 <button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
  10.             </view>
  11.         </view>
  12.     </view>
  13. </template>
  1. export default {
  2.     data() {
  3.         return {
  4.             texts: [
  5.                 'HBuilder，200万开发者选择的IDE',
  6.                 'MUI，轻巧、漂亮的前端开源框架',
  7.                 'wap2app，M站快速转换原生体验的App',
  8.                 '5+Runtime，为HTML5插上原生的翅膀',
  9.                 'HBuilderX，轻巧、极速，极客编辑器',
  10.                 'uni-app，终极跨平台方案',
  11.                 'HBuilder，200万开发者选择的IDE',
  12.                 'MUI，轻巧、漂亮的前端开源框架',
  13.                 'wap2app，M站快速转换原生体验的App',
  14.                 '5+Runtime，为HTML5插上原生的翅膀',
  15.                 'HBuilderX，轻巧、极速，极客编辑器',
  16.                 'uni-app，终极跨平台方案',
  17.                 '......'
  18.             ],
  19.             text: '',
  20.             canAdd: true,
  21.             canRemove: false,
  22.             extraLine: []
  23.         }
  24.     },
  25.     methods: {
  26.         add: function(e) {
  27.             this.extraLine.push(this.texts[this.extraLine.length % 12]);
  28.             this.text = this.extraLine.join('\n');
  29.             this.canAdd = this.extraLine.length < 12;
  30.             this.canRemove = this.extraLine.length > 0;
  31.         },
  32.         remove: function(e) {
  33.             if (this.extraLine.length > 0) {
  34.                 this.extraLine.pop();
  35.                 this.text = this.extraLine.join('\n');
  36.                 this.canAdd = this.extraLine.length < 12;
  37.                 this.canRemove = this.extraLine.length > 0;
  38.             }
  39.         }
  40.     }
  41. }

uniapp

发现错误？想参与编辑？在 GitHub 上编辑此页面！