81 lines
1.7 KiB
Vue
81 lines
1.7 KiB
Vue
<template>
|
|
<div ref="content" class="_sd-dock-container">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SdDockContainer',
|
|
mounted() {
|
|
this.redraw();
|
|
},
|
|
updated() {
|
|
this.redraw();
|
|
},
|
|
methods: {
|
|
redraw() {
|
|
let top = 0;
|
|
let left = 0;
|
|
let bottom = 0;
|
|
let right = 0;
|
|
|
|
const docks = this.$children.filter(
|
|
child => child.$options.name === 'SdDock',
|
|
);
|
|
for (const dock of docks) {
|
|
if (dock.position === 'top') {
|
|
Object.assign(dock.$refs['content'].style, {
|
|
top: top + 'px',
|
|
bottom: '',
|
|
left: left + 'px',
|
|
right: right + 'px',
|
|
});
|
|
top += dock.$refs['content'].offsetHeight;
|
|
} else if (dock.position === 'bottom') {
|
|
Object.assign(dock.$refs['content'].style, {
|
|
top: '',
|
|
bottom: bottom + 'px',
|
|
left: left + 'px',
|
|
right: right + 'px',
|
|
});
|
|
bottom += dock.$refs['content'].offsetHeight;
|
|
} else if (dock.position === 'left') {
|
|
Object.assign(dock.$refs['content'].style, {
|
|
top: top + 'px',
|
|
bottom: bottom + 'px',
|
|
left: left + 'px',
|
|
right: '',
|
|
});
|
|
left += dock.$refs['content'].offsetWidth;
|
|
} else {
|
|
// right
|
|
Object.assign(dock.$refs['content'].style, {
|
|
top: top + 'px',
|
|
bottom: bottom + 'px',
|
|
left: '',
|
|
right: right + 'px',
|
|
});
|
|
right += dock.$refs['content'].offsetWidth;
|
|
}
|
|
}
|
|
|
|
Object.assign(this.$refs['content'].style, {
|
|
paddingTop: top + 'px',
|
|
paddingBottom: bottom + 'px',
|
|
paddingRight: right + 'px',
|
|
paddingLeft: left + 'px',
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
._sd-dock-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|