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">
          <cip-button-text @click="backPrePage" icon="el-icon-arrow-left">返回</cip-button-text>
        </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 { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useMain } from '@cip/hooks/use-main'
import {  ElLoading } from 'element-plus'
import { useCipConfig } from '@cip/components/hooks/use-cip-config'
import CipButtonText from "@cip/components/cip-button-text";
export default {
  name: 'PageLayoutInfo',
  components: { CipButtonText },
  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
  },
  emits: ['back'],
  setup (props, { emit }) {
    const { closeTab } = useMain()
    const cipConfig = useCipConfig()
    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)
      closeTab() // 返回时会关闭tab
    }
    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>