Modal.vue 905 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <div
  3. class="overlay"
  4. @click.self="close"
  5. >
  6. <div
  7. class="modal"
  8. v-bind:style="styles"
  9. >
  10. <slot></slot>
  11. </div>
  12. </div>
  13. </template>
  14. <script>
  15. export default {
  16. name: "",
  17. props: {
  18. styles: {
  19. default: function () {
  20. return {
  21. width: '500px',
  22. height: '350px'
  23. }
  24. },
  25. type: Object
  26. }
  27. },
  28. data: () => ({
  29. }),
  30. methods: {
  31. close () {
  32. console.log('click close');
  33. this.$emit('close')
  34. }
  35. }
  36. }
  37. </script>
  38. <style lang="scss" scoped>
  39. .overlay{
  40. background-color: rgba(0,0,0,0.8);
  41. position:fixed;
  42. top:0; right:0; bottom:0; left:0;
  43. z-index:99999;
  44. }
  45. .modal{
  46. background-color:#fff;
  47. position:absolute;
  48. box-sizing:border;
  49. max-width:80vw;
  50. max-height:70vh;
  51. top:0; right:0; bottom:0; left:0;
  52. margin:auto;
  53. padding:1em;
  54. border-radius:3px;
  55. box-shadow:2px 2px;
  56. }
  57. </style>