vue封装通用页面布局组件

墨蓝 2023-07-13 04:11 38阅读 0赞

在做项目时，我们的页面风格往往都是统一的，页面布局大多也相似，这样我们就可以吧相同的，可以复用的组件封装起来，页面上需要使用时，引用就可以了；下面介绍一个自己封装的页面布局组件

1.在components下新建PageFrame/index.vue,内容如下：

<template>
      <div class="page-frame">
        <div class="page-header">
          <slot name="header"></slot>
        </div>
        <div class="page-body">
          <slot></slot>
        </div>
        <div class="page-footer">
          <slot name="footer"></slot>
        </div>
        <div class="float-action">
          <slot name="float-action"></slot>
        </div>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'page-frame'
    }
    </script>
    
    <style lang="less">
      .page-frame{
        height: 100%;
        position: relative;
        overflow: hidden;
        .float-action{
          position: absolute;
          bottom: 10px;
          right: 10px;
        }
      }
      .page-header{
        // height: 50px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100
      }
      .page-body{
        margin-top: 46px;
        padding-bottom: 140px;
        height: calc(100vh - 46px);
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch
      }
    </style>

2.将组件挂在Vue对象上

在components下新建index.js,内容如下

import PageFrame from './PageFrame'
    const install = (Vue) => {
      Vue.component('GoPageFrame', PageFrame)
    }
    export default install

3.在页面内直接引用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200310160811520.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw,size_16,color_FFFFFF,t_70