vue 公共弹框

弹框组件

<template>
  <div class="modal-bg" v-bind:class="{'md-show': mdShow}">
    <div class="modal-head">
      <slot name="title"></slot>
      <button class="close_modal" @click="closeModal">
        <img src="../../assets/images/common/close.png" alt="">
      </button>
    </div>
    <div class="modal-body">
      <slot name="content"></slot>
    </div>
    <div class="modal-foot">
      <slot name="btnGroup"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "Modal",
  props: ["mdShow"],
  methods: {
    closeModal() {
      this.$emit("close");   // 调用父组件的关闭方法
    }
  }
};
</script>

<style scoped lang="scss">
.my-modal {
      position: absolute;
      width: 400px;
      height: 250px;
      background-color: #f5f5f5;
      border-radius: 4px;
      display: none;
      z-index: 888;
      bottom: 0;
      &.md-show {
        display: block;
      }
      .modal-head {
        font-size: 18px;
        color: #333;
        padding-top: 20px;
        padding-bottom: 10px;
        text-align: center;
        margin-bottom: 10px;
        .modal-title {
          display: inline-block;
          width: 75%;
         }
        .close_modal {
          background-color: transparent;
          border: none;
          outline: none;
          position: absolute;
          right: 17px;
          top: 10px;
          display: inline-block;
      }
  }
  .modal-body {
    padding-left: 10%;
    padding-right: 7%;
    text-indent: 30px;
    // 字间距
    letter-spacing: 1px;
    line-height: 2;
    font-size: 16px;
  }
  .modal-foot {
    text-align: center;
    padding-top: 39px;
    padding-bottom: 20px;
    button {
      height: 38px;
      width: 132px;
      outline: none;
      border: none;
      font-size: 16px;
      color: #f9f9f9;
      background-color: rgba(0, 51, 102, 0.77);
      transition: all .3s ease;
      line-height: 1;
      border-radius: 3px;
      &:hover {
        background-color: #rgba(0, 51, 102);
        transition: all .3s ease;
      }
    }
  }
}
</style >

父组件

<modal :mdShow="mdShow" v-on:close="closeModal">
        <span slot="title" class="modal-title">拒绝理由</span>
        <textarea id="ref_text" slot="content" style="resize:none"></textarea>
        <button slot="btnGroup" @click="submitBtn">确定</button>
</modal>

<script>
import Modal from "../../components/modal/Modal";
export default {
  name: "Parent",
  components: {
    Modal
  },
   data() {
    return {
      mdShow: true,
    }
  },
  methods: {
    closeModal() {
      this.mdShow = false;
    }
    submitBtn() {
       this.mdShow = false;
    }
  }
}
</script>