Commit ad17111d authored by Sendya's avatar Sendya

fix: GlobalFooter props check err

parent 4d1d8485
......@@ -231,6 +231,28 @@ const layoutConf = reactive({
</template>
```
#### Custom footer with slot
```vue
<GlobalFooter>
<template #links>
<a>链接1</a>
<a>链接2</a>
<a>链接3</a>
<a>链接4</a>
</template>
<template #copyright>
<span>Pro Layout &copy; 2021 Sendya.</span>
</template>
</GlobalFooter>
```
#### Custom footer with props
```vue
<GlobalFooter :links="[{ title: 'Link 1', href: '#' }, { title: 'Link 2', href: '#' }]" copyright="Pro Layout &copy; 2021 Sendya." />
```
### Use WaterMark
```vue
<router-view v-slot="{ Component }">
......
{
"name": "@ant-design-vue/pro-layout",
"version": "3.1.6",
"version": "3.1.7",
"license": "MIT",
"files": [
"dist"
......
......@@ -2,6 +2,7 @@ import './index.less';
import { WithFalse } from '../typings';
import { defineComponent, PropType, SetupContext, VNodeChild } from 'vue';
import { getPropsSlot } from '../utils';
export type Links = WithFalse<
{
......@@ -18,6 +19,25 @@ export interface GlobalFooterProps {
prefixCls?: string;
}
const hasLinks = (props: GlobalFooterProps, slots: Record<string, any>) => {
if (
props.links === null ||
props.links === false ||
(Array.isArray(props.links) && props.links.length <= 0) ||
slots.links === undefined
) {
return false;
}
return true;
};
const hasCopyright = (props: GlobalFooterProps, slots: Record<string, any>) => {
if (props.copyright === null || props.copyright === false || slots.copyright === undefined) {
return false;
}
return true;
};
export default defineComponent({
name: 'GlobalFooter',
props: {
......@@ -32,24 +52,23 @@ export default defineComponent({
},
},
setup(props: GlobalFooterProps, { slots }: SetupContext) {
if (
(props.links == null ||
props.links === false ||
(Array.isArray(props.links) && props.links.length === 0)) &&
(props.copyright == null || props.copyright === false)
) {
if (hasLinks(props, slots) && hasCopyright(props, slots)) {
console.warn('[pro-layout]: GlobalFooter required `links` or `copyright`');
return () => null;
}
const baseClassName = `${props.prefixCls}-global-footer`;
const copyright = props.copyright || (slots.copyright && slots.copyright());
return () => (
return () => {
const links = getPropsSlot(slots, props, 'links');
const copyright = getPropsSlot(slots, props, 'copyright');
return (
<footer class={baseClassName}>
{props.links && (
{links && (
<div class={`${baseClassName}-links`}>
{props.links.map(link => (
{(props.links &&
props.links.map(link => (
<a
key={link.key}
title={link.key}
......@@ -58,11 +77,13 @@ export default defineComponent({
>
{link.title}
</a>
))}
))) ||
links}
</div>
)}
{props.copyright && <div class={`${baseClassName}-copyright`}>{copyright}</div>}
{copyright && <div class={`${baseClassName}-copyright`}>{copyright}</div>}
</footer>
);
};
},
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment