小程序自定义弹框

Posted 2020-12-22 海娇

1、.wxml

<view class="modal-mask" catchtouchmove="preventTouchMove" v-if="showModal"></view>
        <view class="modal-dialog" v-if="showModal">
            <view class="modal-title">关联信息确认</view>
            <view class="modal-content">
                <text>学生姓名：张三</text>
                <text>所在班级：精英班</text>
                <text>所在年级：高一</text>
                <text>所在学校：春晓学校</text>
                <text class="modal-info">请认真核实并确认此信息！关联后不可更改。</text>
            </view>
            <view class="modal-footer">
                <view class="btn btn-cancel" @tap="onCancel" data-status="cancel">取消</view>
                <view class="btn btn-confirm" @tap="onConfirm" data-status="confirm">确定</view>
            </view>
        </view>

2、wxjs

<script>
    export default {
        data() {
            return {
                showModal: false,
            }
        },
        onLoad() {

        },
        methods: { 
            showDialogBtn: function() {
                this.showModal = true;
            },
            preventTouchMove: function() {},
            onCancel: function() {
                this.showModal = false;
            },
            onConfirm: function() {
                this.showModal = false;
            }

        }
    }
</script>

3、wxss

<style lang="scss" scoped>
   
    .modal-mask {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: #000;
        opacity: 0.5;
        overflow: hidden;
        z-index: 9000;
        color: #fff;
    }

    .modal-dialog {
        width: 460rpx;
        height: 580rpx;
        overflow: hidden;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -230rpx;
        margin-top: -290rpx;
        z-index: 9999;
        background: #fff;
        border-radius: 30rpx;
    }

    .modal-title {
        padding-top: 50rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: #030303;
        text-align: center;
    }

    .modal-content {
        padding: 30rpx 42rpx;

        text {
            display: block;
            font-size: 28rpx;
            color: #888;
            margin-bottom: 15rpx;
        }

        .modal-info {
            color: #f00;
            font-size: 24rpx;
        }
    }


    .modal-footer {
        display: flex;
        flex-direction: row;
        height: 82rpx;
        border-top: 1px solid #dedede;
        font-size: 30rpx;
        line-height: 80rpx;
        font-weight: bold;
    }

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

    .btn:active {
        background-color: #efefef;
    }

    .btn-confirm {
        width: 50%;
        color: #3E92FF;
        text-align: center;
    }
</style>