如何用VUE写一个多用模态框组件模版

对于新手们来说，如何写一个可以多用的组件，还是有点难度的，组件如何重用，如何传值这些在实际使用中，是多少会存在一些障碍的，所以今天特意写一个最常用的模态框组件提供给大家，希望能帮助到您！

Modal.vue组件

 .modal-backdrop {
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: rgba(0,0,0,.3); 
    display: flex; 
    justify-content: center; 
    align-items: center;
    z-index: 12;
    .modal { 
        background-color: #fff; 
        box-shadow: 2px 2px 20px 1px; 
        overflow-x:auto; 
        display: flex; 
        flex-direction: column; 
        width: 11.8rem;
        position: relative;
        border-radius: 0.2rem;
        .img{
            width: 3.6rem;
            height: 3.6rem;
            margin: 0.8rem 4.1rem;
        }
        .modal-header{ 
            padding: 0.6rem 4.1rem;
            width: 3.6rem;
            height: 3.6rem;
            box-sizing: border-box; 
            .img{
                width: 100%;
                height: 100%;
            }
            div{
                width: 100%;
                height: 100%;
                background: #000;
            }
        } 
        .modal-body{
            width: 100%;
            height: 0.48rem;
            padding: 0rem 1.6rem;
            margin-bottom: 0.8rem;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between; 
            align-items: center; 
            li{
                width: 2rem;
                height: 0.04rem;
                background: #eeeee5;
            }
        }
        .modal-content{
            width: 100%;
            // height: 0.6rem;
            margin-bottom: 0.8rem;
            text-align: center;
            color: #34304B;
            span{
                color: #32B8B9;
                i{
                    color: #4F4F4F;
                }
            }
        }
        ul{
            li{
                width: 100%;
                height: 1.52rem;
                line-height: 1.52rem;
                text-align: center;
                color: #fff;
                font-size: 0.56rem;
                letter-spacing: 0.4rem;
            }
            ./confirm/i{
                display: flex;
                div:nth-child(1){
                    flex: 1;
                    background: #DEDEDE;
                    color: #BCBBBF;
                }
                div:nth-child(2){
                    flex: 1;
                    color: #fff;
                }
            }
        }
        .blueBackground{
            background: #21A6DF;
        }
        .redBackground{
            background: #FF4046;
        }
    } 
}

.modal-fade-enter,.modal-fade-leave-active{
    opacity: 0;
}
.modal-fade-enter-active, .modal-fade-leave-active{
    transition: opacity 0.5s ease;
}

新建一个index.js文件，在其中全局引入组件，全局引入之后，就不用在每个调用的组件里面单独引入了，可以直接使用

import Modalfrom "./Modal.vue";const components = {    install: function (Vue) {
        Vue.component('Modal', Modal);
    }
}//导出组件export default components;

Index.vue中调用

效果如图

模态框-1.gif

如果只需要一个确定按钮，只需要在调用的时候，这么写就好了

如图

模态框-2.gif

可能并不是特别完美，如果您发现有缺点，还请不吝赐教！

作者：刘员外__
链接：https://www.jianshu.com/p/3fc8d4a29ff1