vue 简易弹框

很简易的弹出框，不想写样式了，凑活看吧

modal.vue

<!--
 * @Description: 
 * @Version: 1.0
 * @author: shihaixia
 * @Date: 2021-09-14 15:38:27
-->
<template>
  <transition name="mask-bg-fade">
    <div class="modal" v-if="visible">
      <div
        class="modal-content"
        :style="{
          backgroundImage: 'url(' + backgroundImage + ')',
        }"
      >
        <header class="modal-head">
          <slot name="header">{{ title }}</slot>
        </header>
        <main>
          <slot></slot>
        </main>
        <footer class="modal-foot">
          <slot name="footer">
            <button @click="btnSave">确定</button>
            <button @click="btnClick">关闭</button>
          </slot>
        </footer>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "操作"
    },
    backgroundImage: {
      type: String,
      default: ""
    },
  },
  methods: {
    btnClick () {
      this.$emit("close")
    },
    btnSave () {
      this.$emit("confirm")
    }
  }
}

</script>

<style>
.modal {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  align-items: center;
  display: flex;
}
.modal-content {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  min-width: 300px;
  min-height: 300px;
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(192, 196, 204, 1);
  border-radius: 6px;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
}
.modal-head {
  font-size: 24px;
  /* border-bottom: 1px solid black; */
  margin: 20px 0;
  color: white;
}
.modal-foot {
  position: absolute;
  bottom: 10px;
}
</style>

组件内使用

<!--
 * @Description: 
 * @Version: 1.0
 * @author: shihaixia
 * @Date: 2021-09-14 14:57:57
-->
<template>
  <div class="hello">
    <button @click="visible = true" class="btn">插槽</button>
    <Modal
      :title="title"
      :visible.sync="visible"
      @confirm="confirm"
      @close="handleclose"
      :backgroundImage="backgroundImage"
    >
      <div class="content">内容</div>
      <!-- <template>
        <div class="hignlight">欢迎来到XXX！</div>
        <div class="content">是否封包</div>
      </template> -->
      <!-- 可自定义 footer -->
      <!-- <template slot="footer">
        <button class="btn" @click="visible = false">我知道了</button>
      </template> -->
    </Modal>
  </div>
</template>

<script>
import Modal from "./Notice/Modal.vue";
export default {
  name: "HelloWorld",
  components: {
    Modal,
  },
  props: {
  },
  data () {
    return {
      visible: false,
      title: "标题",
      backgroundImage: "https://st-gdx.dancf.com/gaodingx/0/uxms/design/20200425-114623-8814.png?x-oss-process=image/resize,w_932/interlace,1,image/format,webp"
    };
  },
  created () {

  },
  methods: {
    confirm () {

    },
    handleclose () {
      this.visible = false
    },
  }
};
</script>
<style scoped>
</style>