Vue怎么自定義模態對話框彈窗

這篇文章主要介紹“Vue怎么自定義模態對話框彈窗”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue怎么自定義模態對話框彈窗”文章能幫助大家解決問題。

模態對話框彈窗效果：

父組件（應用頁面）主要代碼：

<template>
    <view class="app-container">
        <modal-dialog showText="確定要取消收藏嗎？" :isShowDialog="isDialog" @cancel="isDialog = false" @confirm="confirmDelete"></modal-dialog>
    </view>
</template>
 
<script>
    import modalDialog from '@/components/modalDialog.vue';
    
    export default {
        components:{
            modalDialog
        },
        data() {
            return {
                isDialog: false,
            }
        },
        methods: {
            // 業務代碼......
            this.isDialog = false;
        }
    }
</script>

子組件（自定義組件）代碼：

<template>
    <view>
        <view class="global-mask" v-show="isShowDialog"></view>
        <view class="global-dialog" v-show="isShowDialog" >
            <view class="title">溫馨提示</view>
            <view class="content">
                <view class="text">{{showText}}</view>
            </view>
            <view class="btn">
                <view class="left" @tap="cancel" v-if="isShowCancel">{{cancelText}}</view>
                <view class="right" @tap="confirm" v-if="isShowConfirm">{{confirmText}}</view>
            </view>
        </view>
    </view>
</template>
 
<script>
    export default {
        name: 'modalDialog',
        props: {
            showText: {
                type: String,
                default: '提示內容'
            },
            isShowDialog: {
                type: Boolean,
                default: false
            },
            isShowCancel: {
                type: Boolean,
                default: true
            },
            cancelText: {
                type: String,
                default: '取消'
            },
            isShowConfirm: {
                type: Boolean,
                default: true
            },
            confirmText: {
                type: String,
                default: '確定'
            }
        },
        data() {
            return {
                
            };
        },
        methods: {
            cancel() {
                this.$emit('cancel');
            },
            
            confirm() {
                this.$emit('confirm');
            }
        }
    }
</script>
 
<style lang="scss">
    .global-mask {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 998;
        width: 100%;
        height: 100%;
        background: rgba($color: #000000, $alpha: 0.3);
    }
    .global-dialog {
        position: fixed;
        top: 500rpx;
        left: 60rpx;
        top: 45%;
        z-index: 999;
        width: 630rpx;
        background: #FFFFFF;
        border-radius: 15rpx;
        overflow: hidden;
        .title {
            font-size: 36rpx;
            font-weight: 500;
            text-align: center;
            line-height: 100rpx;
            padding-bottom: 10rpx;
        }
        .content {
            .text {
                font-size: 32rpx;
                text-align: center;
                padding-bottom: 40rpx;
            }
            .form {
                padding: 0 40rpx;
                .item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 40rpx;
                    input {
                        width: 340rpx;
                        height: 60rpx;
                        border: 1px solid #eaeaea;
                        border-radius: 10rpx;
                        padding: 0 20rpx;
                    }
                }
            }
        }
        .btn {
            border-top: 1px solid #eaeaea;
            display: flex;
            &> view {
                flex: 1;
                text-align: center;
                line-height: 100rpx;
                font-size: 32rpx;
                &.left {
                    color: #666666;
                }
                &.right {
                    color: #FFFFFF;
                    background: #FF3F42;
                }
            }
        }
    }
</style>

關于“Vue怎么自定義模態對話框彈窗”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。