Modal.vue 610 B

12345678910111213141516171819202122232425262728293031323334353637
  1. <template>
  2. <div class="modal" v-if="show" @click="callBack">
  3. <div class="content">
  4. <template>
  5. <slot name="content"></slot>
  6. </template>
  7. </div>
  8. </div>
  9. </template>
  10. <script>
  11. export default {
  12. props: ["show"],
  13. methods: {
  14. callBack() {
  15. this.$emit("callBack", false);
  16. },
  17. },
  18. };
  19. </script>
  20. <style lang="less" scoped>
  21. .modal{
  22. position: absolute;
  23. width: 100%;
  24. height: 100%;
  25. top: 0;
  26. left: 0;
  27. z-index: 99;
  28. background: rgba(0, 0, 0, 0.8);
  29. cursor: pointer;
  30. .content{
  31. width: 80%;
  32. height: 80%;
  33. margin: 5% auto;
  34. overflow: hidden;
  35. }
  36. }
  37. </style>