uniapp 用view組件作為按鈕 防止重復點擊 我的實現方法

uniapp 用view組件作為按鈕 防止重復點擊 我的實現方法

用兩個相同的view，未點擊時，顯示第一個隱藏第二個；點擊后，隱藏第一個顯示第二個，任務處理完成后恢復初始狀態

1、先在<template>中創建兩個相同的view

        <view class="btnbox" @click.stop="requestPayment()" v-show="gopay">
            <text class="btntxt">去支付</text>
        </view>
        <view class="btnbox" v-show="!gopay">
            <text class="btntxt">支付中 請稍后。。。</text>
        </view>

2、在<script>中定義gopay變量並賦初值

    export default {
        data() {
            return {
                gopay:true,//支付按鈕顯示開關，避免重復點擊
            }
        },
    }

3、在requestPayment()開始時改變gopay=false,處理完成后改變gopay=true

            async requestPayment() {
                this.gopay=false;//隱藏支付按鈕
                //TODO
                }
                uni.requestPayment({
                    
                    },
                    fail: (e) => {
                        
                    },
                    complete: () => {
                        this.gopay=true;//支付完成后打開支付開關
                    }
                })
            },

4、<style>中

    .btnbox{
        width: 98%;
        height: 7vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        background-color: #66CDAA;
    }