怎么用VUE写一个多用模态框组件模版

小编给大家分享一下怎么用VUE写一个多用模态框组件模版，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联建站公司2013年成立，公司自成立以来始终致力于为企业提供官网建设、移动互联网业务开发（小程序开发、手机网站建设、app开发定制等），并且包含互联网基础服务（域名、主机服务、企业邮箱、网络营销等）应用服务；以先进完善的建站体系及不断开拓创新的精神理念，帮助企业客户实现互联网业务，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致赞誉。

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{
        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

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

如图

以上是“怎么用VUE写一个多用模态框组件模版”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！