模态框的封装

在实际开发中，我们经常会用到模态框组件，因此封装一个模态框组件会是一个不错的方式

直接上代码，子组件modal.vue代码如下：

<template>
      <div class="modal-shade">
        <div class="my-modal">
          <div class="modal-title">
            <slot name="modal-title"></slot>
          </div>
          <div class="modal-content">
            <slot name="modal-content"></slot>
          </div>
          <div class="modal-footer">
            <slot name="modal-footer"></slot>
          </div>
        </div>

    </div>

</template>
<style >
  .modal-shade{
    /* width:100%;
     height:100%;
     position:absolute;
     top:0;
     left:0;
     background-color: rgba(0,0,0,0.6);*/
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    background-color: rgba(0,0,0,0.5);
  }
  .my-modal{
    /* position:absolute;
    !* left:34%;
     top:25%;
     width:32%;
     height:50%;*!
     left:50%;
     top:50%;
     width: 36%;
     height: 44%;
     border: 1px  solid #fff;*/

    /*position: relative;
    margin: 50px auto 50px;*/

    position:fixed;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    background: #fff;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3);
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    box-sizing: border-box;
    width: 36%;

  }
  .modal-title{
    /* width:96%;
     height:50px;
     background-color: #1B5661;
     font-family: 黑体;
     font-size: 18px;
     color:#fff;
     line-height: 50px;
     padding-left: 4%;*/
    padding: 10px;
    background-color: #1B5661;
    font-size: 18px;
    color:#fff;
    border: 1px  solid  #fff;
  }
  .modal-content{
    /* width:100%;
     position: absolute;
     left:0;
     top:70px;
     bottom: 0;
     background-color: red;*/

  }

  .modal-footer{
    padding: 10px 20px 20px;
    box-sizing: border-box;
    text-align: center;
  }
</style>
<script  scoped>

    export default{
      props:{
        'title':{
          type:String,
        }
      },
        data(){
            return {
                msg: 'hello vue'
            }
        },
        components: {

        }
    }
</script>

父组件引用方式：

<template>
  <div id="all">
    <my-modal>
      <div slot="modal-title">
        <span>新增供应商</span>
      </div>
      <div slot="modal-content">
        <div class="form-item">
          <div class="label-div"><label for="">供应商名称</label></div>
          <div class="input-div"><input type="text"></div>
        </div>
        <div class="form-item">
          <div class="label-div"><label for="">开户银行</label></div>
          <div class="input-div"><input type="text"></div>
        </div>
        <div class="form-item">
          <div class="label-div"><label for="">开户账号</label></div>
          <div class="input-div"><input type="text"></div>
        </div>
      </div>
      <div slot="modal-footer">
        <button type="button" class="button-style"  @click="modalClose()">取消</button>
        <button type="button" class="button-style" @click="modalClose()">保存</button>
      </div>
    </my-modal>
  </div>
</template>
<script>
  import myModal from '../../publicCom/modal.vue'

  export default {
    data(){
      return {
      }
    },
    components: {
      myModal
    }
  }
</script>
<style scoped>
  #all{
    width:100%;
    height:100%;
    position: relative;
    box-sizing: border-box;

  }
  .form-item{
    padding: 10px 50px;
    font-size: 14px;
  }

  .form-item div{
    display: inline-block;
  }
  .form-item .label-div{
   width: 70px;
  }

  .form-item .input-div{
    margin-left: 10px;

  }

  .input-div input{
    height: 24px;
    width: 280px;
    border: 1px solid #B4B4B4;
  }
  .label-div{
   /* vertical-align: top;*/
    text-align:right;
  }

  textarea{
    width: 300px;
    height: 100px;
  }

  .form-item ul li span{
    width: 80px;
    display: inline-block;
  }
</style>

 

效果如下：