1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 |
- <template>
- <div
- :id="id"
- class="full-width med-row large-row main-content-layout"
- >
- <header class="med-col-3 large-col-3">
- <slot name="header" />
- </header>
- <section
- class="med-col-6 large-col-6"
- @scroll.passive="onScrollCenter"
- >
- <div
- ref="scrollablecenter"
- class="wrapper"
- >
- <slot />
- </div>
- </section>
- <nav class="med-col-3 large-col-3" :class="{ opened: navopened }">
- <slot name="nav" />
- </nav>
- </div>
- </template>
- <script>
- export default {
- name: 'MainContentLayout',
- props: {
- id: {
- type: String,
- required: true
- },
- reftoscrollto: { type: String },
- navopened: { type: Boolean }
- },
- watch: {
- reftoscrollto: function (newref, oldref) {
- console.log('MainLayout reftoscrollto watcher', oldref, newref)
- this.scrollToRef()
- }
- },
- methods: {
- onScrollCenter (e) {
- // console.log('mainLayout onScrollCenter: e', e)
- this.$emit('onCenterScrolled', e)
- },
- scrollToRef () {
- console.log('scrollToRef', this.reftoscrollto, this.$refs)
- this.$scrollTo(this.reftoscrollto, 500, {
- container: this.$refs.scrollablecenter
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- </style>
|