WetProPageContainer 页容器

基本介绍

WetProPageContainer 是为了减少繁杂的面包屑配置和标题，很多页面都需要面包屑和标题的配置。当然也可以关掉自动生成的，而使用自己的配置。同时搭配usePageContainer能快速实现本页面的数据共享，方便简单

组件引入：import { WetProPageContainer } from '@wetspace/pro-components'

基本使用

固定头部

如上例所示，使用属性fixedHeader控制

设置Tabs

如上例所示，使用tabList属性配置tab子项，使用tabProps配置tabs相关属性，该属性基本继承自ElTabs

页面数据请求数据初始化

container-child.vue

<template>
    <ElForm>
        <ElFormItem label="姓名">
            <ElInput :disabled="!pageStatus.edit" v-model="values.name"></ElInput>
        </ElFormItem>
        <ElFormItem label="年龄">
            <ElInput :disabled="!pageStatus.edit" v-model="values.age"></ElInput>
        </ElFormItem>
        <ElFormItem label="地址">
            <ElInput :disabled="!pageStatus.edit" v-model="values.site"></ElInput>
        </ElFormItem>
    </ElForm>
    <ElDivider></ElDivider>
    <ElButton @click="refresh">刷新页面</ElButton>
    <ElButton @click="setPageStatus({edit:!pageStatus.edit})">{{ !pageStatus.edit? '编辑状态':'不可编辑' }}</ElButton>
</template>
<script setup lang="ts">
import { ElForm,ElFormItem,ElInput,ElDivider,ElButton } from 'element-plus'
import { usePageContainer } from '@wetspace/pro-components'
import { ref,watch } from 'vue'

const {
    pageInfo,
    pageStatus,
    refresh,
    setPageStatus
} = usePageContainer<{name:string,age:number,site:string}>()

const values = ref({...pageInfo.value})
watch(pageInfo,(v)=>{
    if(v){
        values.value = pageInfo.value
    }
})
</script>

页面数据共享

目的

为了更好的为页面逻辑服务，尤其是复杂的页面，往往需要抽离成各种模块组件，这些组件又需要共享整个页面的初始化数据，为此提供了usePageContainer这个hooks函数，配合组件的request属性，其下的各个子组件能够通过usePageContainer，获取到页面初始化或刷新后的页面全局数据

注意点：

• usePageContainer 类型为：

  function usePageContainer<D>(): {
      pageStatus: ComputedRef<Record<string, any>>;
      pageInfo: ComputedRef<D>;
      refresh: () => Promise<void>;
      setPageStatus: (v: Record<string, any>) => void;
  }

• usePageContainer,返回参数pageStatus,pageInfo，均不可直接修改（而且ComputedRef类型，也是不可以这样做的），本质上页面共享的全局数据都是不可更改的，因此不提供修改入口。但是状态是可以更改的，通过setPageStatus进行更改

具体示例，见上

属性

属性	描述	类型	默许值
title	页面容器标题	string	-
fixedHeader	是否固定头部	boolean	false
breadcrumb	面包屑配置	false |{path:string,name:string}[]	[]
loading/v-model:loading	页面数据加载状态	boolean	-
request	页面初始化请求	WetProPageContainerRq	-
status	自定义页面状态	Record<string,any>	{}
pageKey	页面唯一标识	number|string	-
tabList	页面唯一标识	WetProCardTabItem[]	-
tabProps	tabs配置	Partial<TabsProps & {onTabRemove:(n:string)=>void, onTabChange:(n:string)=>void, onTabAdd:()=>void, onEdit:(n:string,action:'remove' | 'add')=>void,onTabClick:(pane: TabsPaneContext, ev: Event)=>void}>	-
tabKey/v-model:tab-key	激活状态的tabKey	number|string	-
fill	是否充满容器	boolean	-

类型参考(ts)

import type { Component,VNode } from 'vue'

type WetProCardTabItem = {
    key:string,
    tab:string,
    closable?:boolean,
    disabled?:boolean,
    children?:Component | VNode
}

type WetProPageContainerRq<T = any> =  (...p:any)=> Promise<T>

插槽

• header，头部插槽，用于自定义组件头部
• footer，脚部插槽，用于自定义组件脚部