@ -32,16 +32,17 @@
< / PageFooter >
< / div >
< / template >
< script lang = "ts" >
< script lang = "ts" setup >
import {
CSSProperties ,
PropType ,
provide ,
defineComponent ,
computed ,
watch ,
ref ,
unref ,
useAttrs ,
useSlots ,
} from 'vue' ;
import PageFooter from './PageFooter.vue' ;
@ -53,122 +54,109 @@
import { useContentHeight } from '/@/hooks/web/useContentHeight' ;
import { PageWrapperFixedHeightKey } from '/@/enums/pageEnum' ;
export default defineComponent ( {
defineOptions ( {
name : 'PageWrapper' ,
components : { PageFooter , PageHeader } ,
inheritAttrs : false ,
props : {
title : propTypes . string ,
dense : propTypes . bool ,
ghost : propTypes . bool ,
content : propTypes . string ,
contentStyle : {
type : Object as PropType < CSSProperties > ,
} ) ;
const props = defineProps ( {
title : propTypes . string ,
dense : propTypes . bool ,
ghost : propTypes . bool ,
content : propTypes . string ,
contentStyle : {
type : Object as PropType < CSSProperties > ,
} ,
contentBackground : propTypes . bool ,
contentFullHeight : propTypes . bool . def ( false ) ,
contentClass : propTypes . string ,
fixedHeight : propTypes . bool ,
upwardSpace : propTypes . oneOfType ( [ propTypes . number , propTypes . string ] ) . def ( 0 ) ,
} ) ;
const attrs = useAttrs ( ) ;
const slots = useSlots ( ) ;
const wrapperRef = ref ( null ) ;
const headerRef = ref ( null ) ;
const contentRef = ref ( null ) ;
const footerRef = ref ( null ) ;
const { prefixCls } = useDesign ( 'page-wrapper' ) ;
provide (
PageWrapperFixedHeightKey ,
computed ( ( ) => props . fixedHeight ) ,
) ;
const getIsContentFullHeight = computed ( ( ) => {
return props . contentFullHeight ;
} ) ;
const getUpwardSpace = computed ( ( ) => props . upwardSpace ) ;
const { redoHeight , setCompensation , contentHeight } = useContentHeight (
getIsContentFullHeight ,
wrapperRef ,
[ headerRef , footerRef ] ,
[ contentRef ] ,
getUpwardSpace ,
) ;
setCompensation ( { useLayoutFooter : true , elements : [ footerRef ] } ) ;
const getClass = computed ( ( ) => {
return [
prefixCls ,
{
[ ` ${ prefixCls } --dense ` ] : props . dense ,
} ,
attrs . class ? ? { } ,
] ;
} ) ;
const getShowHeader = computed (
( ) => props . content || slots ? . headerContent || props . title || getHeaderSlots . value . length ,
) ;
const getShowFooter = computed ( ( ) => slots ? . leftFooter || slots ? . rightFooter ) ;
const getHeaderSlots = computed ( ( ) => {
return Object . keys ( omit ( slots , 'default' , 'leftFooter' , 'rightFooter' , 'headerContent' ) ) ;
} ) ;
const getContentStyle = computed ( ( ) : CSSProperties => {
const { contentFullHeight , contentStyle , fixedHeight } = props ;
if ( ! contentFullHeight ) {
return { ... contentStyle } ;
}
const height = ` ${ unref ( contentHeight ) } px ` ;
return {
... contentStyle ,
minHeight : height ,
... ( fixedHeight ? { height } : { } ) ,
} ;
} ) ;
const getContentClass = computed ( ( ) => {
const { contentBackground , contentClass } = props ;
return [
` ${ prefixCls } -content ` ,
contentClass ,
{
[ ` ${ prefixCls } -content-bg ` ] : contentBackground ,
} ,
contentBackground : propTypes . bool ,
contentFullHeight : propTypes . bool ,
contentClass : propTypes . string ,
fixedHeight : propTypes . bool ,
upwardSpace : propTypes . oneOfType ( [ propTypes . number , propTypes . string ] ) . def ( 0 ) ,
] ;
} ) ;
watch (
( ) => [ getShowFooter . value ] ,
( ) => {
redoHeight ( ) ;
} ,
setup ( props , { slots , attrs } ) {
const wrapperRef = ref ( null ) ;
const headerRef = ref ( null ) ;
const contentRef = ref ( null ) ;
const footerRef = ref ( null ) ;
const { prefixCls } = useDesign ( 'page-wrapper' ) ;
provide (
PageWrapperFixedHeightKey ,
computed ( ( ) => props . fixedHeight ) ,
) ;
const getIsContentFullHeight = computed ( ( ) => {
return props . contentFullHeight ;
} ) ;
const getUpwardSpace = computed ( ( ) => props . upwardSpace ) ;
const { redoHeight , setCompensation , contentHeight } = useContentHeight (
getIsContentFullHeight ,
wrapperRef ,
[ headerRef , footerRef ] ,
[ contentRef ] ,
getUpwardSpace ,
) ;
setCompensation ( { useLayoutFooter : true , elements : [ footerRef ] } ) ;
const getClass = computed ( ( ) => {
return [
prefixCls ,
{
[ ` ${ prefixCls } --dense ` ] : props . dense ,
} ,
attrs . class ? ? { } ,
] ;
} ) ;
const getShowHeader = computed (
( ) => props . content || slots ? . headerContent || props . title || getHeaderSlots . value . length ,
) ;
const getShowFooter = computed ( ( ) => slots ? . leftFooter || slots ? . rightFooter ) ;
const getHeaderSlots = computed ( ( ) => {
return Object . keys ( omit ( slots , 'default' , 'leftFooter' , 'rightFooter' , 'headerContent' ) ) ;
} ) ;
const getContentStyle = computed ( ( ) : CSSProperties => {
const { contentFullHeight , contentStyle , fixedHeight } = props ;
if ( ! contentFullHeight ) {
return { ... contentStyle } ;
}
const height = ` ${ unref ( contentHeight ) } px ` ;
return {
... contentStyle ,
minHeight : height ,
... ( fixedHeight ? { height } : { } ) ,
} ;
} ) ;
const getContentClass = computed ( ( ) => {
const { contentBackground , contentClass } = props ;
return [
` ${ prefixCls } -content ` ,
contentClass ,
{
[ ` ${ prefixCls } -content-bg ` ] : contentBackground ,
} ,
] ;
} ) ;
watch (
( ) => [ getShowFooter . value ] ,
( ) => {
redoHeight ( ) ;
} ,
{
flush : 'post' ,
immediate : true ,
} ,
) ;
return {
getContentStyle ,
wrapperRef ,
headerRef ,
contentRef ,
footerRef ,
getClass ,
getHeaderSlots ,
prefixCls ,
getShowHeader ,
getShowFooter ,
omit ,
getContentClass ,
} ;
{
flush : 'post' ,
immediate : true ,
} ,
} ) ;
) ;
< / script >
< style lang = "less" >
@ prefix - cls : ~ '@{namespace}-page-wrapper' ;
xingyu
3 years ago
GitHub