text | uni-app

text

Attributes

space

# text

Component Type：UniTextElement

文本

在app-uvue和app-nvue中，文本只能写在text中，而不能写在view的text区域。文本样式的控制也应该在text组件上写style，而不是在view的样式里写。

虽然app-uvue中写在view的text区域的文字，也会被编译器自动包裹一层text组件，看起来也可以使用。但这样会造成无法修改该text文字的样式，详见uvue的样式不继承章节。

# # Attributes

name	type	default	description
selectable	boolean	false	文本是否可选
space	string	-	显示连续空格 space
decode	boolean	false	是否解码

# # space

name	description
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

# # Example

hello uni-app x

<template>
 <view>
   <page-head :title="title"></page-head>
   <view class="uni-padding-wrap uni-common-mt">
     <view class="text-box" scroll-y="true">
       <text class="text">{{ text }}</text>
     </view>
     <view class="uni-btn-v">
       <button class="uni-btn" type="primary" :disabled="!canAdd" @click="add">
         add line
       </button>
       <button
         class="uni-btn"
         type="warn"
         :disabled="!canRemove"
         @click="remove"
       >
         remove line
       </button>
       <button class="uni-btn" type="primary" @click="textProps">
         更多属性示例
       </button>
     </view>
   </view>
 </view>
</template>
<script lang="uts">
export default {
   data() {
       return {
           title: 'text',
           texts: [
               'HBuilderX，轻巧、极速，极客编辑器',
               'uni-app x，终极跨平台方案',
               'uniCloud，js serverless云服务',
               'uts，大一统语言',
               'uniMPSdk，让你的App具备小程序能力',
               'uni-admin，开源、现成的全端管理后台',
               'uni-id，开源、全端的账户中心',
               'uni-pay，开源、云端一体、全平台的支付',
               'uni-ai，聚合ai能力',
               'uni-cms，开源、云端一体、全平台的内容管理平台',
               'uni-im，开源、云端一体、全平台的im即时消息',
               'uni统计，开源、完善、全平台的统计报表',
               '......'
           ] as string[],
           text: '',
           canAdd: true,
           canRemove: false,
           extraLine: [] as string[]
       }
   },
   methods: {
       add: function () {
           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 () {
           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;
           }
       },
 textProps: function () {
     uni.navigateTo({
       url: '/pages/component/text/text-props'
     })
 }
   }
}
</script>

<style>
.text-box {
 margin-bottom: 40rpx;
 padding: 40rpx 0;
 display: flex;
 min-height: 300rpx;
 background-color: #ffffff;
 justify-content: center;
 align-items: center;
}

.text {
 font-size: 30rpx;
 color: #353535;
 line-height: 54rpx;
 text-align: center;
}
</style>