1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- <template>
- <div
- class="overlay"
- @click.self="close"
- >
- <div
- class="modal"
- v-bind:style="styles"
- >
- <slot></slot>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: "",
- props: {
- styles: {
- default: function () {
- return {
- width: '500px',
- height: '350px'
- }
- },
- type: Object
- }
- },
- data: () => ({
- }),
- methods: {
- close () {
- console.log('click close')
- this.$emit('close')
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .overlay{
- background-color: rgba(0,0,0,0.8);
- position:fixed;
- top:0; right:0; bottom:0; left:0;
- z-index:99999;
- }
- .modal{
- background-color:#fff;
- position:absolute;
- box-sizing:border;
- max-width:80vw;
- max-height:70vh;
- top:0; right:0; bottom:0; left:0;
- margin:auto;
- padding:1em;
- border-radius:3px;
- box-shadow:2px 2px;
- }
- </style>
|