mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.1 KiB
68 lines
1.1 KiB
3 years ago
|
<template>
|
||
|
|
<div class="nc-container" :class="{active:modal}" @click="modal=false">
|
||
|
|
<div class="nc-content elevation-3 pa-4" @click.stop>
|
||
|
|
<slot />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'NcSlider',
|
||
|
|
props: {
|
||
|
|
value: Boolean
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
modal: {
|
||
|
|
get() {
|
||
|
|
return this.value
|
||
|
|
},
|
||
|
|
set(v) {
|
||
|
|
this.$emit('input', v)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
(document.querySelector('[data-app]') || this.$root.$el).append(this.$el)
|
||
|
|
},
|
||
|
|
|
||
|
|
destroyed() {
|
||
|
|
this.$el.parentNode && this.$el.parentNode.removeChild(this.$el)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
|
||
|
|
.nc-container {
|
||
|
|
position: fixed;
|
||
|
|
pointer-events: none;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
z-index: 9999;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
|
||
|
|
.nc-content {
|
||
|
|
background-color: var(--v-backgroundColorDefault-base);
|
||
|
|
height: 100%;
|
||
|
|
width: max(50%, 700px);
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
top: 0;
|
||
|
|
right: min(-50%, -700px);
|
||
|
|
transition: .3s right;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
pointer-events: all;
|
||
|
|
|
||
|
|
& > .nc-content {
|
||
|
|
right: 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|