text.uvue

<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>