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>
        <button class="uni-btn-v" @click="hideLoading">
          隐藏 loading 提示框
        </button>
        <text>为方便演示，loading弹出3秒后自动关闭</text>
      </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
        });
      }
      setTimeout(() => {
        this.hideLoading();
      }, 3000);
    },
    hideLoading: function () {
      uni.hideLoading();
    }
  }
}
</script>