toast.uvue

<template>
    <view>
        <page-head :title="title"></page-head>
        <view class="uni-padding-wrap">
            <view class="uni-btn-v">
                <button class="uni-btn-v" type="default" @tap="toast1Tap">点击弹出默认toast</button>
				<button class="uni-btn-v" type="default" @tap="toastTapIconError">点击弹出设置icon的toast</button>
                <button class="uni-btn-v" type="default" @tap="toast2Tap">点击弹出设置duration的toast</button>
                <button class="uni-btn-v" type="default" @tap="toast3Tap">点击弹出显示loading的toast</button>
                <!-- #ifndef MP-ALIPAY -->
                <button class="uni-btn-v" type="default" @tap="toast4Tap">点击弹出显示自定义图片的toast</button>
                <!-- #endif -->
                <!-- #ifdef APP-PLUS -->
                <button class="uni-btn-v" type="default" @tap="toast5Tap">点击显示无图标的居底toast</button>
                <!-- #endif -->
                <button class="uni-btn-v" type="default" @tap="hideToast">点击隐藏toast</button>
            </view>
			<text>{{exeRet}}</text>
        </view>
    </view>
</template>
<script lang="uts">
    export default {
        data() {
            return {
                title: 'toast',
				exeRet:'',
                _showTimer: 0
            }
        },
        // #ifdef MP-ALIPAY
        onUnload() {
            clearTimeout(this._showTimer);
        },
        // #endif
        methods: {
            toast1Tap: function () {
                uni.showToast({
                    title: "默认",
					success:function(res){
						this.exeRet = "success:" + JSON.stringify(res) + new Date()
					},
					fail:function(res){
						this.exeRet = "fail:" + JSON.stringify(res)
					},
                })
            },
			toastTapIconError: function () {
                uni.showToast({
                    title: "默认",
					icon:'error',
					success:function(res){
						this.exeRet = "success:" + JSON.stringify(res) + new Date()
					},
					fail:function(res){
						this.exeRet = "fail:" + JSON.stringify(res)
					},
                })
            },
            toast2Tap: function () {
                uni.showToast({
                    title: "duration 3000",
                    duration: 3000,
					success:function(res){
						this.exeRet = "success:" + JSON.stringify(res) + new Date()
					},
					fail:function(res){
						this.exeRet = "fail:" + JSON.stringify(res)
					},
                })
            },
            toast3Tap: function () {
                uni.showToast({
                    title: "loading",
                    icon: "loading",
                    duration: 5000,
					success:function(res){
						this.exeRet = "success:" + JSON.stringify(res) + new Date()
					},
					fail:function(res){
						this.exeRet = "fail:" + JSON.stringify(res)
					},
                })
                // #ifdef MP-ALIPAY
                this._showTimer = setTimeout(() => {
                    // icon 是 loading 时，showToast 实际执行的是 showLoading
                    my.hideLoading()
                    // 执行完所有代码再清除定时器
                    clearTimeout(this._showTimer);
                }, 3000)
                // #endif

            },
            toast4Tap: function () {
                uni.showToast({
                    title: "logo",
                    image: "/static/uni.png",
					success:function(res){
						this.exeRet = "success:" + JSON.stringify(res) + new Date()
					},
					fail:function(res){
						this.exeRet = "fail:" + JSON.stringify(res)
					},
                })
            },
            // #ifdef APP-PLUS
            toast5Tap: function () {
                uni.showToast({
                    title: "显示一段轻提示",
                    position: 'bottom',
					success:function(res){
						this.exeRet = "success:" + JSON.stringify(res) + new Date()
					},
					fail:function(res){
						this.exeRet = "fail:" + JSON.stringify(res)
					},
                })
            },
            // #endif
            hideToast: function () {
                uni.hideToast()
            }
        }
    }
</script>