弹窗

showModal: false,    //蒙版默认不显示
methods:{
    // 删除按钮事件
            showDialogBtn() {
                this.showModal = true
                // console.log("==========================",index)
            },
            /**
             * 弹出框蒙层截断touchmove事件
             */
            preventTouchMove() {},
            // 点击么蒙版退出弹窗
            hideModal() {
                this.showModal = false
            },
            // 弹窗取消事件
            onCancel() {
                this.hideModal();
            },
             //  点击确定按钮退出弹窗
              onConfirm(){
                     this.hideModal();
                }
}

弹窗蒙版

            <div class="modal-mask" @click="hideModal" v-if="showModal">

            </div>

<!-- 弹窗 -->
            <div class="flex_page_center">
                <div class="modal-dialog" v-if="showModal" @touchmove.stop.prevent>
                    <div class="modal-title">删除家庭成员{{uaername}}</div>
                    <div class="modal-phonenum">手机号码{{phonenum}}</div>
                    <div class="modal-content">
                        <input type="text" v-model="verify_code" placeholder="请输入验证码" class="body_cart">
                        <div class="send_btn" v-if="times_num>0">{{('重新发送'+times_num+'s')}}</div>
                        <div class="send_btn" @click.stop="getverification()" v-else>发送验证码</div>

                    </div>
                    <div class="modal-footer">
                        <div class="btn-cancel" @click="onCancel">取消</div>
                        <div class="btn-confirm" @click="onConfirm">确定</div>
                    </div>
                </div>
            </div>

css

/* 弹窗 */

    .modal-mask {
        width: 750px;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background: #000000;
        opacity: 0.3;
        overflow: hidden;
        z-index: 25;
        color: #fff;
    }

    .modal-dialog {
        margin-top: 50%;
        width: 654rpx;
        background: #ffffff;
        border-radius: 15rpx;
        overflow: hidden;
        position: fixed;
        z-index: 30;

    }

    .flex_page_center {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ffffff;

    }

    .modal-title {
        padding-top: 50rpx;
        font-size: 32rpx;
        color: #333333;

        text-align: center;
    }

    .modal-phonenum {
        margin-top: 39rpx;
        text-align: center;
        color: #666666;
        font-size: 28rpx;
    }

    .modal-content {
        position: relative;
        padding: 50rpx 32rpx;
    }

    .input {
        text-align: left;
        width: 546px;
        height: 92px;
        background: #f8f8f8;
        border-radius: 4px;
        font-size: 28rpx;
        line-height: 28rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        color: #333;
    }

    input-holder {
        color: #666;
        font-size: 28rpx;
    }

    .modal-footer {
        display: flex;
        flex-direction: row;
        height: 86rpx;
        border-top: 1px solid #e4e4ee;
        font-size: 34rpx;
        line-height: 86rpx;
    }

    .btn-cancel {
        width: 50%;
        color: #666;
        text-align: center;
        border-right: 1px solid #e4e4ee;
    }

    .btn-confirm {
        width: 50%;
        color: #FABF13;
        text-align: center;
    }

    /* 验证码 */
    .body_cart {

        padding-left: 26rpx;
        font-size: 28rpx;

        width: 546rpx;
        height: 92rpx;
        background: #f8f8f8;
        border-radius: 4rpx;

    }

    .send_btn {
        z-index: 31;
        font-size: 30rpx;
        position: absolute;
        top: 75rpx;
        right: 97rpx;
        color: #FABF13;

    }

弹窗.PNG

长按弹窗：

 @longtap="leavemyCommunity(item, index)"