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;
    }