https://uniapp.dcloud.io/component/text

文本组件
用于包裹文本内容

属性说明

属性名 类型 默认值 说明 平台差异说明
selectable Boolean false 文本是否可选 App、H5、快手小程序
user-select Boolean false 文本是否可选 微信小程序
space String 显示连续空格 App、H5、微信小程序
decode Boolean false 是否解码 App、H5、微信小程序

space 值说明

值 说明
ensp 中文字符空格一半大小
emsp 中文字符空格大小
nbsp 根据字体设置的空格大小 
  1. <template>
  2.     <view>
  3.       <text selectable></text>
  4.     <text space="ensp"></text>
  5.     <text space="emsp"></text>
  6.     <text space="nbsp" style="font-size:30px;"></text>
  7.     <text>&amp;</text> // 解析成&
  8.   </view>  
  9. </template>

Tips

  • 组件内只支持嵌套 ，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异
  • 在app-nvue下，只有才能包裹文本内容。无法在组件包裹文本

  • decode 可以解析的有 |   | | < | | > | | & | & | | —- | —- | —- | —- | —- | —- | —- | —- | | ' | |   | |   | | | |

  • 各个操作系统的空格标准并不一致

  • 除了文本节点以外的其他节点都无法长按选中
  • 支持 \n 方式换行
  • 如果使用 组件编译时会被转换为 
  1. <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
  2. <template>
  3.     <view>
  4.         <view class="uni-padding-wrap uni-common-mt">
  5.             <view class="text-box" scroll-y="true">
  6.                 <text>{{text}}</text>
  7.             </view>
  8.             <view class="uni-btn-v">
  9.                 <button type="primary" :disabled="!canAdd" @click="add">add line</button>
  10.                 <button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
  11.             </view>
  12.         </view>
  13.     </view>
  14. </template>
  1. export default {
  2.     data() {
  3.         return {
  4.             texts: [
  5.                 'HBuilder，500万开发者选择的IDE',
  6.                 'MUI，轻巧、漂亮的前端开源框架',
  7.                 'wap2app，M站快速转换原生体验的App',
  8.                 '5+Runtime，为HTML5插上原生的翅膀',
  9.                 'HBuilderX，轻巧、极速，极客编辑器',
  10.                 'uni-app，终极跨平台方案',
  11.                 'HBuilder，500万开发者选择的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. }

image.png