loading.uvue

<template>
  <view>
    <page-head :title="title"></page-head>
    <view class="uni-list">
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">是否显示透明蒙层-屏蔽点击事件</view>
        <switch :checked="maskSelect" @change="maskChange" />
      </view>
      <view class="uni-padding-wrap">
        <view class="uni-title uni-common-mt">
          <text class="uni-title-text"> 设置标题 </text>
        </view>
      </view>
      <view class="uni-list uni-common-pl">
        <radio-group @change="radioChange" class="radio-group">
          <radio class="uni-list-cell uni-list-cell-pd radio" v-for="(item, index) in items" :key="item.value"
            :class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value"
            :checked="index === current">
            {{ item.name }}
          </radio>
        </radio-group>
      </view>
    </view>
    <view class="uni-padding-wrap">
      <view class="uni-btn-v">
        <button class="uni-btn-v" type="primary" @click="showLoading">显示 loading 提示框</button>
        <!-- #ifndef MP-ALIPAY -->
        <button class="uni-btn-v" @click="hideLoading">隐藏 loading 提示框</button>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>
<script lang="uts">
  type ItemType = {
    value : string
    name : string
  }
  export default {
    data() {
      return {
        title: 'loading',
        items: [
          {
            value: 'null',
            name: '无标题',
          },
          {
            value: '三秒后自动关闭',
            name: '普通标题',
          },
          {
            value: '超长文本内容，测试超出范围-超长文本内容，测试超出范围-三秒后自动关闭',
            name: '长标题',
          },
        ] as ItemType[],
        current: 0,
        maskSelect: false,
        titleSelect: "null"
      }
    },
    methods: {

      radioChange(e : RadioGroupChangeEvent) {
        const selected = this.items.find((item) : boolean => {
          return item.value == e.detail.value
        })
        if (selected != null) {
          this.titleSelect = selected.value
        }
      },
      maskChange: function (e : SwitchChangeEvent) {
        this.maskSelect = e.detail.value
      },
      showLoading: function () {

        console.log(this.titleSelect)
        if (this.titleSelect == "null") {
          uni.showLoading({
            title: "",
            mask: this.maskSelect
          });
        } else {
          uni.showLoading({
            title: this.titleSelect,
            mask: this.maskSelect
          });
        }
        // #ifdef MP-ALIPAY
        this._showTimer && clearTimeout(this._showTimer);
        this._showTimer = setTimeout(() => {
          this.hideLoading();
        }, 3000)
        // #endif
        // #ifdef APP-PLUS
        setTimeout(function () {
          this.hideLoading();
        }, 3000);
        // #endif
      },
      hideLoading: function () {
        uni.hideLoading();
      }
    }
    // #ifdef MP-ALIPAY
    ,
    onUnload() {
      // 页面卸载的时候，手动关闭loading
      this._showTimer && clearTimeout(this._showTimer);
    }
    // #endif
  }
</script>