vue项目中公用footer组件使用

一、代码实例

使用页面

template：<v-foot></v-foot>

script：

        import vHead from './Header.vue';

        import vFoot from './Footer.vue'；

        export default {

            data(){

                return {

                    collapse: false

                }

            },

            components:{

                vHead,vFoot

            },

        }

二、注意问题：

Footer.vue组件需要在页面的最低端，但是中间内容的多少会影响该组件的位置,position: fixed;  bottom: 0;可以解决页面内容不足以撑满浏览器高度的情况，但是如果页面内容很多时会把内容覆盖，所以position:fixed方式不可取。

三、解决方案

手动设置出header与footer外的中间的content的高度，这是最低高度为 minHeight = 屏幕高度 - header高度-footer高度；这样，既能够使content内容不足时撑满浏览器高度，又不会再content高度过高时被footer覆盖！

<v-head></v-head>

<div class="content" :style="{minHeight:minHeight + 'px'}" >

            <transition name="move" mode="out-in">

                <keep-alive :include="tagsList">

                    <router-view></router-view>

                </keep-alive>

           </transition>

</div>

<v-foot></v-foot>

<!--示例中的290为header与footer高度之和-->

mounted(){

            this.minHeight = document.documentElement.clientHeight - 290

            var that = this

            window.onresize = function(){

                this.minHeight = document.documentElement.clientHeight - 290

            }

},