Vue.js彈出模態框組件開發

前言

在開發項目的過程當中，常常會須要開發一些彈出框效果，但原生的alert和confirm每每都沒法知足項目的要求。此次在開發基於Vue.js的讀書WebApp的時候總共有兩處須要進行提示的地方，由於一開始就沒有引入其餘的組件庫，如今只好本身寫一個模態框組件了。目前只是一個僅知足當前項目需求的初始版本，由於這個項目比較簡單，也就沒有保留不少的擴展功能。這個組件仍是有不少擴展空間的，能夠增長更多的自定義內容和樣式。這裏只介紹如何去開發一個模態框組件，有須要進行更多擴展的，能夠根據本身的需求自行開發。

組件模板

<template>
<div class="dialog">
    <div class="mask"></div>
    <div class="dialog-content">
        <h3 class="title">{{ modal.title }}</h3>
        <p class="text">{{ modal.text }}</p>
        <div class="btn-group">
            <div class="btn" @click="cancel">{{ modal.cancelButtonText }}</div>
            <div class="btn" @click="submit">{{ modal.confirmButtonText }}</div>
        </div>
    </div>
</div>
</template>

模態框結構分爲：頭部標題、提示內容和操做區域。同時通常還會有一個遮罩層。這次需求比較簡單，也無需圖標等內容，因此結構上寫的也比較簡單。實際開發中可根據需求對結構進行相應的調整。

組件樣式

.dialog {
    position: relative;

    .dialog-content {
        position: fixed;
        box-sizing: border-box;
        padding: 20px;
        width: 80%;
        min-height: 140px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 5px;
        background: #fff;
        z-index: 50002;
        .title {
            font-size: 16px;
            font-weight: 600;
            line-height: 30px;
        }
        .text {
            font-size: 14px;
            line-height: 30px;
            color: #555;
        }
        .btn-group {
            display: flex;
            position: absolute;
            right: 0;
            bottom: 10px;
            .btn {
                padding: 10px 20px;
                font-size: 14px;
                &:last-child {
                    color: #76D49B;
                }
            }
        }
    }
    .mask {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 50001;
        background: rgba(0,0,0,.5);
    }
}

樣式比較簡單，就很少說了。

組件接口

export default {
    name: 'dialog',
    props: {
        dialogOption: Object
    },
    data() {
        return {
            resolve: '',
            reject: '',
            promise: '', // 保存promise對象
        }
    },
    computed: {
        modal: function() {
            let options = this.dialogOption;
            return {
                title: options.title || '提示',
                text: options.text,
                cancelButtonText: options.cancelButtonText ? options.cancelButtonText : '取消',
                confirmButtonText: options.confirmButtonText ? options.confirmButtonText : '肯定',
            }
        }
    },
    methods: {
        //肯定,將promise判定爲完成態
        submit() {
            this.resolve('submit');
        },
        // 取消,將promise判定爲reject狀態
        cancel() {
            this.reject('cancel');
        },
        //顯示confirm彈出,並建立promise對象，給父組件調用
        confirm() {
            this.promise = new Promise((resolve, reject) => {
                this.resolve = resolve;
                this.reject = reject;
            });
            return this.promise; //返回promise對象,給父級組件調用
        }
    }

}

在模態框組件中定義了三個方法，核心的方法是confirm，此方法是提供給父級組件調用的，返回一個promise對象。使用promise對象主要是爲了異步調用，由於不少時候咱們使用模態框時須要根據返回結果再進行下一步處理。

擴展提示：

若是須要擴展的話，能夠經過props的dialogOption傳遞更多的字段，在computed中進行判斷，好比增長一個字段isShowCancelButton能夠控制取消按鈕是否顯示。其餘擴展同理。

調用

<v-dialog v-show="showDialog" :dialog-option="dialogOption" ref="dialog"></v-dialog>

this.showDialog = true;
this.$refs.dialog.confirm().then(() => {
    this.showDialog = false;
    next();
}).catch(() => {
    this.showDialog = false;
    next();
})

源碼地址

Dialog組件源碼

實現效果