You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
import './index.less'
|
|
import { getVueNode } from '../../utils'
|
|
|
|
import type { WithFalse } from '../../types'
|
|
import type { CSSProperties, PropType, Slot } from 'vue'
|
|
import type { VueNodeOrRender } from '#/types'
|
|
import { getPrefixCls } from '#/layout/RouteContext'
|
|
|
|
type LinkInfo = {
|
|
key?: string
|
|
title: VueNodeOrRender
|
|
href: string
|
|
blankTarget?: boolean
|
|
}
|
|
|
|
export type Link = WithFalse<VueNodeOrRender | LinkInfo[]>
|
|
|
|
export interface GlobalFooterProps {
|
|
links: Link
|
|
copyright?: WithFalse<string>
|
|
prefixCls?: string
|
|
}
|
|
|
|
function renderLinks(links: Link, linksSlot?: Slot) {
|
|
if (Array.isArray(links)) {
|
|
if (links.length === 0) {
|
|
return null
|
|
}
|
|
return (links as LinkInfo[]).map(link => (
|
|
<a
|
|
key={link.key}
|
|
title={link.key}
|
|
target={link.blankTarget ? '_blank' : '_self'}
|
|
href={link.href}
|
|
rel="noreferrer"
|
|
>
|
|
{link.title}
|
|
</a>
|
|
))
|
|
}
|
|
return getVueNode(links as WithFalse<VueNodeOrRender>, linksSlot)
|
|
}
|
|
|
|
export default defineComponent({
|
|
name: 'GlobalFooter',
|
|
props: {
|
|
links: {
|
|
type: [Object, Function, String, Boolean, Array] as PropType<Link>,
|
|
default: () => {
|
|
return undefined
|
|
}
|
|
},
|
|
copyright: {
|
|
type: [Object, Function, String, Boolean] as PropType<WithFalse<VueNodeOrRender>>,
|
|
default: () => {
|
|
return undefined
|
|
}
|
|
},
|
|
prefixCls: {
|
|
type: String,
|
|
default: 'pro-global-footer'
|
|
}
|
|
},
|
|
setup(props, { slots, attrs }) {
|
|
return () => {
|
|
const linksDom = renderLinks(props.links, slots.links)
|
|
const copyrightDom = getVueNode(props.copyright, slots.copyright)
|
|
if (linksDom && copyrightDom == null) {
|
|
return null
|
|
}
|
|
|
|
const globalPrefixCls = getPrefixCls()
|
|
const baseClassName = `${globalPrefixCls}-${props.prefixCls}`
|
|
const clsString = [baseClassName, attrs.class]
|
|
|
|
return (
|
|
<div class={clsString} style={attrs.style as CSSProperties}>
|
|
{linksDom && <div class={`${baseClassName}-links`}>{linksDom}</div>}
|
|
{copyrightDom && <div class={`${baseClassName}-copyright`}>{copyrightDom}</div>}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
})
|