• text

    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 上编辑此页面！