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="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="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">嵌套</text>
      </view>
      <view class="text-box">
        <text
          >一级节点黑色
          <text id="text-nested" ref="text-nested" style="color: red;background-color: yellow;"
            >二级节点红色且背景色黄色
            <text>三级节点不继承二级的颜色</text>
          </text>
          <text style="font-size: 50px">二级节点大字体</text>
        </text>
      </view>

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

      <view class="uni-row">
        <text id="empty-text"></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，终极跨平台方案',
    }
  },
  methods: {
    // 自动化测试
    setTextNested() {
      (this.$refs["text-nested"] as UniTextElement).value = "二级节点文字红色且背景色黄色";
    }
  }
}
</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 {
  margin-top: 5px;
  padding: 20px;
  border: 1px solid red;
  text-align: center;
}
</style>