60 lines
904 B
Vue
60 lines
904 B
Vue
<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>
|