cip-components/page-layout/info/index.vue

<template>
  <div class="page-layout-info manager-page-padding" v-loading="loading" :class="{'page-layout-info--border': border}" :style="{ width }">
    <div class="page-layout-info__header" v-if="!cHideHeader">
      <div >
        <slot name="back">
          <el-button type="text" @click="backPrePage" icon="el-icon-arrow-left">返回</el-button>
        </slot>
        <span class="page-layout-info__title" v-if="title">
          {{title}}
        </span>
      </div>
      <div>
        <slot name="handle"></slot>
      </div>
    </div>
    <div class="page-layout-info__main">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import { inject, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElButton, ElLoading } from 'element-plus'
export default {
  name: 'PageLayoutInfo',
  components: { ElButton },
  props: {
    border: { // handle-bar 是否有边框
      type: Boolean,
      default: true
    },
    title: { // 页面title
      type: String
    },
    width: {
      type: String, // eg: 1px
      default: '100%'
    },
    loading: Boolean,
    hideHeader: {}
  },
  directives: {
    loading: ElLoading.directive
  },
  setup (props) {
    const cipConfig = inject('cip-config', {})
    const cHideHeader = computed(() => {
      if (props.hideHeader !== undefined) {
        return props.hideHeader
      } else {
        return cipConfig.layout.hideHeader === true
      }
    })

    const router = useRouter()
    const backPrePage = () => {
      // TODO: 可进一步处理
      router.go(-1)
    }
    return {
      cHideHeader,
      backPrePage
    }
  }
}
</script>
<style lang="less">
.page-layout-info{
  //&::-webkit-scrollbar { width: 0 !important }
  box-sizing: border-box;
  margin: 0 auto;
  &.page-layout-info--border{
    .page-layout-info__header{
      box-sizing: border-box;
      border: 1px solid #ddd;
    }
  }
  height: 100%;
  @handleBarHeight: 40px;
  background: @background;
  &__header{
    height:  @handleBarHeight;
    background: #fff;
    margin-bottom: 8px;
    padding: 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &__title{
    font-weight: bold;
    &:before{
      content: " ";
      margin: 8px;
      border-left: 2px solid #bbb;
      line-height: 0.8em;
    }
  }
  &__main{
    height: calc(100% - @handleBarHeight - 8px);
  }
}

</style>