59 lines
916 B
Vue
59 lines
916 B
Vue
<template>
|
|
|
|
<div class="dialog" v-if="show" @click.stop="hideDialog" >
|
|
|
|
|
|
<div @click.stop class="dialog__content">
|
|
<svg @click="hideDialog" class="dialog__close" >
|
|
<title>Закрыть</title>
|
|
<use xlink:href="@/assets/images/sprite.svg#close"></use>
|
|
</svg>
|
|
|
|
<slot></slot>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import toggleMixin from "@/mixins/toggleMixin";
|
|
export default {
|
|
name: "dialog-menu",
|
|
mixins:[toggleMixin],
|
|
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.dialog__content{
|
|
position:absolute;
|
|
top:0px;
|
|
height:100vh;
|
|
background: white;
|
|
border-right: 1px solid #afafaf;
|
|
width:80%;
|
|
}
|
|
.dialog {
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, 0);
|
|
position: fixed;
|
|
display: flex;
|
|
}
|
|
.dialog__close{
|
|
width:16px;height:16px;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top:10px;
|
|
right: 10px;
|
|
}
|
|
|
|
|
|
</style> |