text-props.uvue

<template>
  <scroll-view class="page-scroll-view">
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-title">
        <text class="uni-title-text">text相关属性示例</text>
      </view>

      <view class="uni-title">
        <text class="uni-subtitle-text">根据宽度自动折行</text>
      </view>
      <view class="text-box">
        <text>{{ multiLineText }}</text>
      </view>

      <view class="uni-title">
        <text class="uni-subtitle-text">\\n换行</text>
      </view>
      <view class="text-box">
        <text>\n 换行</text>
        <text>\\n 换行</text>
        <text>\\\n 换行</text>
        <text>\n 换行 \\n 换行 \\\n 换行 \\\\n 换行 \\\\\n 换行</text>
        <text space="nbsp">HBuilderX，轻巧、极速，极客编辑器;\nuni-app x，终极跨平台方案;</text>
      </view>

      <view class="uni-title">
        <text class="uni-subtitle-text">截断（clip）</text>
      </view>
      <view class="text-box">
        <text class="uni-flex-item" style="width: 100%;text-overflow: clip;white-space: nowrap;">{{
          multiLineText
        }}</text>
      </view>

      <view class="uni-title">
        <text class="uni-subtitle-text">截断（ellipsis）</text>
      </view>
      <view class="text-box">
        <text class="uni-flex-item" style="width: 100%;text-overflow: ellipsis;white-space: nowrap;">{{
          multiLineText
        }}</text>
      </view>

      <view class="uni-title">
        <text class="uni-subtitle-text">selectable</text>
      </view>
      <view class="text-box">
        <text :selectable="true">{{ singleLineText }}</text>
      </view>

      <view class="uni-title">
        <text class="uni-subtitle-text">space</text>
        <text class="uni-subtitle-text">依次为nbsp ensp emsp效果</text>
      </view>
      <view class="text-box">
        <text space="nbsp">{{ singleLineText }}</text>
        <text space="ensp">{{ singleLineText }}</text>
        <text space="emsp">{{ singleLineText }}</text>
      </view>

      <view class="uni-title">
        <text class="uni-subtitle-text">decode</text>
        <text class="uni-subtitle-text">依次为lt gt amp apos nbsp ensp emsp效果</text>
      </view>
      <view class="text-box">
        <text :decode="true">&lt; &gt; &amp; &apos;</text>
        <text :decode="true">uni-app&nbsp;x，终极跨平台方案</text>
        <text :decode="true">uni-app&ensp;x，终极跨平台方案</text>
        <text :decode="true">uni-app&emsp;x，终极跨平台方案</text>
      </view>

      <view class="uni-title">
        <text class="uni-subtitle-text">嵌套1</text>
      </view>
      <view class="text-box">
        <text>一级节点黑色
          <text style="color: red;background-color: yellow;">二级节点红色且背景色黄色
            <text>App三级节点不继承二级的颜色</text>
          </text>
          <text style="font-size: 50px">二级节点大字体</text>
        </text>
      </view>

      <view class="uni-title">
        <text class="uni-subtitle-text">嵌套2</text>
      </view>
      <view class="text-box">
        <text>
          <text>文字应居中显示</text>
        </text>
      </view>

      <view class="uni-title">
        <text class="uni-subtitle-text">padding和border</text>
      </view>
      <view class="text-box">
        <text class="text-padding-border">hello uni-app x</text>
        <text class="text-padding-border" style="width: 200px;">hello uni-app x</text>
        <text class="text-padding-border" style="height: 100px;">hello uni-app x</text>
        <text class="text-padding-border" style="width: 200px;height: 100px;">hello uni-app x</text>
      </view>

      <view v-if="autoTest">
        <view class="uni-row">
          <text id="empty-text"></text>
        </view>
        <view class="uni-row">
          <text id="empty-text2">{{emptyText}}</text>
        </view>
        <text>一级节点文本
          <text>二级节点文本
            <text id="nested-text">{{nestedText}}</text>
          </text>
        </text>
        <text id="height-text" style="height: 50px;">{{heightText}}</text>
      </view>
    </view>
  </scroll-view>
</template>

<script>
  export default {
    data() {
      return {
        title: 'text-props',
        multiLineText:
          'HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言；HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言',
        singleLineText: 'uni-app x，终极跨平台方案',
        // 自动化测试
        autoTest: false,
        nestedText: '三级节点文本',
        emptyText: '空文本',
        heightText: '设置高度文本'
      }
    },
    methods: {
      // 自动化测试
      setNestedText() {
        this.nestedText = "修改三级节点文本";
      },
      setEmptyText() {
        this.emptyText = "";
      },
      setHeightText() {
        this.heightText = "修改设置高度文本";
      }
    }
  }
</script>

<style>
  .text-box {
    margin-bottom: 20px;
    padding: 20px 0;
    background-color: #ffffff;
    justify-content: center;
    align-items: center;
  }

  .text {
    font-size: 15px;
    color: #353535;
    line-height: 27px;
    text-align: center;
  }

  .text-padding-border {
    margin-top: 5px;
    padding: 20px;
    border: 5px solid red;
    text-align: center;
  }
</style>