一个简单的布局

index.js

import layout from './Layout.vue';

export default layout;

Layout.vue

<template>
  <div class="logo-container__component">
    <div class="logo-container">
      <img
        :src="`${$baseUrl}image/logo/full_screen_logo.png_new.png`"
        class="logo"
        alt="logo">
      <span v-if="text" class="common-title">{{ text }}</span>
      <slot name="nav" />
      <slot name="backBtn">
        <span v-if="showHasBackBtn" class="back-text" @click="backPageHandler">{{ $t(backBtnKey) }}</span>
      </slot>
    </div>
    <el-progress v-if="percentage > 0" :percentage="percentage" :show-text="false" :stroke-width="4" style="z-index:99;margin-top: -2px" />
    <div :style="`width: ${contentWidth}`" :class="[currentUrlName== 'dialogue'? 'drawer-component__main_only': 'drawer-component__main']">
      <slot name="content" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'fullScreenLogo',
  props: {
    text: {
      type: String,
      default: '',
    },
    totalStep: {
      type: Number,
      default: 3,
    },
    currentStep: {
      type: [String, Number],
      default: 0
    },
    showHasBackBtn: {
      type: Boolean,
      default: true,
    },
    routerList: {
      type: Array,
      default: () => []
    },
    backBtnKey: {
      type: String,
      default: 'common.back'
    },
    onBack: { // 自定义回退
      type: Boolean,
      default: true
    },
    // 自定义宽度
    contentWidth: {
      type: String,
      default: '660px'
    }
  },
  data() {
    return {
      currentUrlName: ''
    };
  },
  computed: {
    percentage() {
      return (this.currentStep / this.totalStep) * 100;
    }
  },
  watch: {
    $route(to, from) {
      this.chooseCurrentUrl();
    }
  },
  mounted() {
    this.chooseCurrentUrl();
  },
  methods: {
    chooseCurrentUrl() {
      this.currentUrlName = this.getUrlname();
    },
    getUrlname() {
      return this.$route.path.split('/')[2];
    },
    backPageHandler() {
      // TODO 需要支持跨组件自定义或垮应用页面返回
      if (this.onBack) {
        // 自定义跳转 自行处理
        this.$emit('onBack');
      } else {
        // 默认跳转：回退到上一页
        this.$router.back(-1);
      }
    },
    goHome() {
      this.$router.push({ path: '/dashboard/overview' });
    }
  }
};
</script>

<style lang="scss" scoped>
.logo-container__component {
  height: 64px;
  background: #FFFFFF;
  border-bottom: 1px solid #EEEEEE;
  .logo-container {
    display: flex;
    align-items: center;
    height: 100%;
    overflow: hidden;
    padding: 0 30px;
    img.logo {
      // width: 120px;
      // height: 40px;
      // cursor: pointer;
      height: 40px;
      cursor: pointer;
      object-fit: contain;
    }
    .common-title {
      margin-left: 10px;
      margin-top: 4px;
      font-size: 18px;
      font-weight: bold;
      color: #1a1c21;
      flex: 1;
    }
    .back-text {
      cursor: pointer;
      margin-top: 4px;
      font-family: 'Poppins';
      font-style: normal;
      font-weight: 500;
      font-size: 14px;
      color: #727880;
    }
  }
  /deep/ .el-progress-bar {
    width: 105%;
  }
  .drawer-component__main {
    width: 660px;
    margin: 0 auto;
    min-height: calc(100vh - 112px);
  }

  .drawer-component__main_only {
    width: 660px;
    margin: 0 auto;
    min-height: calc(100vh - 112px);
    overflow-x: hidden;
  }

}

</style>

引入使用 

  


<full-screen-layout :show-has-back-btn="false" content-width="100%">
     <template slot="nav">
        XXXXXX
      </template>
      <template slot="content">
         <Search v-if="showSearch" @searchContent="searchContent" />
         <router-view v-if="showRouterView" />
      </template>
</full-screen-layout>

import FullScreenLayout from '@/layout/fullWorkOrderLayout/index.js';
import Search from '@/components/search';

export default {
  name: 'WorkOrder',
  data() {
    return {
      showRouterView:false,
   }
  },
  methods: {
     searchContent(status) {
      if (status.type === 'hide') {
        this.showRouterView = false;
      } else {
        this.showRouterView = true;
      }
    },
  }
}

 <router-view  /> 会展示 /work-order/xxx 匹配到的路由