OmniCard/mpuniapp/pages/component/button/buttonstatus.uvue

<template>
  <!-- #ifdef APP && !VUE3-VAPOR -->
  <scroll-view style="flex:1;">
  <!-- #endif -->
    <view style="padding: 8px;">
      <!--type-->
      <button class="margin-10 btn" :disabled="disabled_boolean">
        type-default
      </button>
      <button class="margin-10 btn" :disabled="disabled_boolean" type="primary">
        type-primary
      </button>
      <button class="margin-10 btn" :disabled="disabled_boolean" type="warn">
        type-warn
      </button>
      <!--size-->
      <button class="margin-10 btn" :disabled="disabled_boolean">
        size-default
      </button>
      <button class="margin-10 btn" :disabled="disabled_boolean" size="mini">
        size-mini
      </button>
      <!--plain-->
      <button class="margin-10 btn" :disabled="disabled_boolean" :plain="true">
        plain=true
      </button>
      <button class="margin-10 btn" :disabled="disabled_boolean" type="primary" :plain="true">
        plain=true type=primary
      </button>
      <button class="margin-10 btn" :disabled="disabled_boolean" type="warn" :plain="true">
        plain=true type=warn
      </button>
      <button class="margin-10 btn" :disabled="disabled_boolean">
        plain-false
      </button>

      <button id="test-button-hover-class" class="margin-10" :disabled="disabled_boolean" hover-class="button-hover" :hover-stay-time="5000">hover-class button-hover</button>
      <button class="margin-10 btn custom-btn" :disabled="disabled_boolean" hover-class="is-hover">
        custom-btn
      </button>
      <button class="margin-10 btn custom-btn" :disabled="disabled_boolean" plain hover-class="is-hover">
        custom-btn
      </button>
      <button class="margin-10 btn" style="font-size: 15px;color: red;" type="warn" :plain="true" :disabled="disabled_boolean">
        custom-btn-plain-warn
      </button>
      <button class="margin-10" type="primary" :disabled="disabled_boolean" hover-class="none">hover-class none</button>

      <button class="margin-10" type="primary" :disabled="disabled_boolean">uni-app x</button>
      <button id="changeDisabledButton" class="margin-10" type="primary" @click="change_disabled_boolean">修改disabled为{{!disabled_boolean}}</button>
      <!--disable-->
      <button class="margin-10 btn">
        disable-false
      </button>
      <button class="margin-10 btn" :disabled="true">
        disable-true
      </button>

      <button class="margin-10 btn" :disabled="disabled_boolean">
        uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。
      </button>

      <!-- #ifdef VUE3-VAPOR && !MP -->
      <button class="margin-10 loading-class" :disabled="disabled_boolean" loading loading-class="custom-loading">
        自定义 loading 状态
      </button>
      <!-- #endif -->

      <!-- #ifdef VUE3-VAPOR && APP-IOS -->
      <button class="margin-10" :disabled="disabled_boolean" loading ios-loading-snow>
        iOS 雪花加载
      </button>
      <!-- #endif -->
    </view>
  <!-- #ifdef APP && !VUE3-VAPOR -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
  const disabled_boolean = ref(false)

  function change_disabled_boolean() {
    disabled_boolean.value = !disabled_boolean.value
  }

  function set_disabled_false() {
    disabled_boolean.value = false
  }

  // #ifndef APP
  defineExpose({
    set_disabled_false,
  })
  // #endif

  // #ifdef APP
  type DomRectType = {
    x : number,
    y : number,
    left : number,
    top : number,
    right : number,
    bottom : number,
    width : number,
    height : number,
  }

  type Data = {
    rect: DomRectType | null,
  }
  const data = reactive<Data>({
    rect: null,
  })

  function getHoverButtonRect() : DomRectType | null {
    const el = uni.getElementById('test-button-hover-class')
    const rect = el?.getBoundingClientRect() ?? null
    if (rect == null) {
      return null
    }
    const offsetY = uni.getSystemInfoSync().safeArea.top + 44
    return {
      x: rect.x,
      y: rect.y + offsetY,
      left: rect.left,
      top: rect.top + offsetY,
      right: rect.right,
      bottom: rect.bottom + offsetY,
      width: rect.width,
      height: rect.height,
    }
  }

  onReady(() => {
    data.rect = getHoverButtonRect()
  })

  defineExpose({
    data,
    getHoverButtonRect,
    set_disabled_false,
  })
  // #endif
</script>

<style>
  .custom-btn {
    color: #ffffff;
    background-color: #1AAD19;
    border-color: #1AAD19;
    border-radius: 5px;
    border-width: 0.5px;
    height: 53px;
  }

  .is-hover {
    color: rgba(255, 255, 255, 0.6);
    background-color: rgba(26, 173, 25, 0.7);
    border-color: rgba(26, 173, 25, 0.7);
  }

  .button-hover {
    color: rgba(26, 173, 25, 0.7);
  }

  /* #ifdef VUE3-VAPOR && !MP */
  .loading-class {
    color: #28cc1c;
    font-size: 20px;
  }

  .custom-loading {
    border-color: #28cc1c;
    width: 20px;
    height: 20px;
  }
  /* #endif */
</style>