grid-view-layout.vue 1.3 KB
Newer Older
1
<template>
2
    <layout :class="layoutClassName">
3 4
        <header class="view-header">
            <div class="view-header__top">
5 6
                <slot name="headerTop" />
            </div>
7
            <div class="view-header__content">
8 9
                <slot name="headerContent" />
            </div>
10
            <div class="view-header__bottom">
11 12 13
                <slot name="headerBottom" />
            </div>   
        </header>
14
        <content class="view-content content-container">
15 16
            <slot />
        </content>
17
        <footer  class="view-footer">
18 19 20 21 22 23 24 25 26 27
            <slot name="footer" />
        </footer>
    </layout>
</template>
<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';

@Component({})
export default class AppGridViewLayout extends Vue {

28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
    /**
     * 视图默认使用
     *
     * @type {boolean}
     * @memberof AppGridViewLayout
     */
    @Prop({ default: true }) public viewDefaultUsage?: boolean;

    /**
     * 布局类名
     *
     * @memberof AppGridViewLayout
     */
    get layoutClassName(){
      return {'grid-view-layout':true, 
        'view-layout': true, 
        'view-default-usage': this.viewDefaultUsage ? true :false}
    }

47 48 49 50 51 52
}
</script>

<style lang="scss">
@import "./grid-view-layout.scss";
</style>