EveryLike/pages/component/text/text.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="text-box">
        <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>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  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: 20px;
    padding: 20px 0;
    display: flex;
    min-height: 150px;
    background-color: #ffffff;
    justify-content: center;
    align-items: center;
  }

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