show-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-list-cell uni-list-cell-pd">
		    <view class="uni-list-cell-db">超长标题</view>
		    <switch :checked="titleSelect" @change="titleChange"/>
		  </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="ts">
    export default {
        data() {
            return {
                title: 'loading',
				maskSelect:false,
				titleSelect:false
            }
        },
        methods: {
			maskChange: function (e : SwitchChangeEvent) {
				this.maskSelect = e.detail.value
			},
			titleChange: function (e : SwitchChangeEvent) {
				this.titleSelect = e.detail.value
			},
            showLoading: function() {
				
				let titleVal = "三秒后自动关闭"
				if(this.titleSelect){
					titleVal = "超长文本内容，测试超出范围-超长文本内容，测试超出范围"
				}
                
				
				uni.showLoading({
				    title: titleVal,
					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>