text组件

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

属性说明

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

space 值说明

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

子组件

text组件在web浏览器渲染（含浏览器、小程序webview渲染模式）中，可以并只能嵌套text组件。

Tips

• 支持 \n 方式换行。
• 在app-nvue下，只有<text>才能包裹文本内容。无法在<view>组件包裹文本。
• decode 可以解析的有   < > & '    。
• 各个操作系统的空格标准并不一致。
• 除了文本节点以外的其他节点都无法长按选中。
• 如果使用 <span> 组件编译时会被转换为 <text>。

示例

查看演示

以下示例代码，来自于hello uni-app项目，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。

Vue

<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<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>

<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<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>

Script

<script>
export default {
  data() {
    return {
      texts: [
        'fe6 很帮',
        'water-pro，轻巧、漂亮的前端开源框架',
        '番知很勤奋',
        '番知很棒',
        '番知体验最好',
        'QinJs，终极跨平台方案',
        'fe6 很帮',
        'water-pro，轻巧、漂亮的前端开源框架',
        '番知很勤奋',
        '番知很棒',
        '番知体验最好',
        'QinJs，终极跨平台方案',
        '......'
      ],
      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;
      }
    },
  },
};
</script>

<script>
export default {
  data() {
    return {
      texts: [
        'fe6 很帮',
        'water-pro，轻巧、漂亮的前端开源框架',
        '番知很勤奋',
        '番知很棒',
        '番知体验最好',
        'QinJs，终极跨平台方案',
        'fe6 很帮',
        'water-pro，轻巧、漂亮的前端开源框架',
        '番知很勤奋',
        '番知很棒',
        '番知体验最好',
        'QinJs，终极跨平台方案',
        '......'
      ],
      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;
      }
    },
  },
};
</script>