button.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view>
      <page-head :title="title"></page-head>
      <view class="uni-padding-wrap uni-common-mt">
        <button
          :type="type"
          :size="size"
          :plain="plain"
          :disabled="disabled"
          class="button test-button"
        >
          页面主操作 Normal
        </button>
        <!-- <button type="primary" :loading="loading" class="button">页面主操作 Loading</button> -->
        <button type="primary" :disabled="true" class="button">
          页面主操作 Disabled
        </button>

        <button type="default" class="button default-button" @click="addCount">
          页面次要操作 Normal
        </button>
        <button type="default" :disabled="true" class="button disabled-button">
          页面次要操作 Disabled
        </button>

        <button type="warn" class="button">警告类操作 Normal</button>
        <button type="warn" :disabled="true" class="button">
          警告类操作 Disabled
        </button>

        <view class="button-sp-area">
          <button type="primary" :plain="true" class="button text-button">
            {{ text }}
          </button>
          <button type="primary" :disabled="true" :plain="true" class="button">
            不可点击的按钮
          </button>

          <button type="default" :plain="true" class="button">
            按钮 plain背景镂空
          </button>
          <button type="default" :disabled="true" :plain="true" class="button">
            按钮 Disabled
          </button>

          <view class="uni-flex uni-row">
            <button class="button mini-btn" type="primary" size="mini">
              按钮 mini
            </button>
            <button class="button mini-btn" type="default" size="mini">
              按钮 mini
            </button>
            <button class="button mini-btn" type="warn" size="mini">
              按钮 mini
            </button>
          </view>
        </view>
      </view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>
<script lang="ts">
export default {
  data() {
    return {
      title: 'button',
      loading: false,
      _timer: 0,
      text: '文字来自data绑定',
      type: 'primary',
      size: 'default',
      plain: false,
      disabled: false,
      count: 0,
    }
  },
  onShow() {
    // this.clearTimer();
    // this._timer = setTimeout(() => {
    //     // this.loading = true;
    // }, 300)
  },
  onUnload() {
    // this.clearTimer();
    // this.loading = false;
  },
  methods: {
    // clearTimer() {
    //     if (this._timer != 0) {
    //         clearTimeout(this._timer);
    //     }
    // }
    addCount() {
      this.count++
    },
  },
}
</script>

<style>
.button {
  margin-top: 30rpx;
}

.button-sp-area {
  margin: 0 auto;
  width: 90%;
}

.mini-btn {
  margin-right: 10rpx;
  margin-bottom: 30rpx;
}
</style>