Commit ac911538 authored by Sendya's avatar Sendya

fix: footerRender, GlobalFooter props check

parent 5f70ec85
...@@ -28,9 +28,11 @@ ...@@ -28,9 +28,11 @@
<!-- custom breadcrumb itemRender --> <!-- custom breadcrumb itemRender -->
<template #breadcrumbRender="{ route, params, routes }"> <template #breadcrumbRender="{ route, params, routes }">
<span v-if="routes.indexOf(route) === routes.length - 1"> <span v-if="routes.indexOf(route) === routes.length - 1">
<SmileOutlined />
{{ route.breadcrumbName }} {{ route.breadcrumbName }}
</span> </span>
<router-link v-else :to="{ path: route.path, params }"> <router-link v-else :to="{ path: route.path, params }">
<SmileOutlined />
{{ route.breadcrumbName }} {{ route.breadcrumbName }}
</router-link> </router-link>
</template> </template>
...@@ -54,29 +56,15 @@ ...@@ -54,29 +56,15 @@
<!-- content begin --> <!-- content begin -->
<router-view /> <router-view />
<!-- content end --> <!-- content end -->
<FooterToolbar> <template #footerRender>
<a-space> <GlobalFooter
<span :disabled="state.layout !== 'mix'"> :links="[
<span style="margin-right: 8px">SplitMenus:</span> { key: 'a link', title: 'Link1', href: 'http://www.baidu.com/', blankTarget: true },
<a-switch { key: 'b link', title: 'Link2', href: 'https://www.google.com/', blankTarget: true },
v-model:checked="state.splitMenus" ]"
:disabled="state.layout !== 'mix'" copyright="2021 &copy; Sendya"
checked-children="ON" ></GlobalFooter>
un-checked-children="OFF" </template>
/>
</span>
<a-button @click="handlePageLoadingClick">Page Loading</a-button>
<a-select v-model:value="state.navTheme" style="width: 100px">
<a-select-option value="light">Light</a-select-option>
<a-select-option value="dark">Dark</a-select-option>
</a-select>
<a-select v-model:value="state.layout" style="width: 100px">
<a-select-option value="side">Side</a-select-option>
<a-select-option value="top">Top</a-select-option>
<a-select-option value="mix">Mix</a-select-option>
</a-select>
</a-space>
</FooterToolbar>
</pro-layout> </pro-layout>
</template> </template>
...@@ -84,7 +72,13 @@ ...@@ -84,7 +72,13 @@
import { computed, defineComponent, reactive, ref, watchEffect } from 'vue'; import { computed, defineComponent, reactive, ref, watchEffect } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { Button, Switch, Select, Space, Badge, Menu } from 'ant-design-vue'; import { Button, Switch, Select, Space, Badge, Menu } from 'ant-design-vue';
import { getMenuData, clearMenuItem, FooterToolbar } from '@ant-design-vue/pro-layout'; import {
getMenuData,
clearMenuItem,
FooterToolbar,
GlobalFooter,
} from '@ant-design-vue/pro-layout';
import { SmileOutlined } from '@ant-design/icons-vue';
import type { RouteContextProps } from '@ant-design-vue/pro-layout'; import type { RouteContextProps } from '@ant-design-vue/pro-layout';
const i18n = (t: string) => t; const i18n = (t: string) => t;
...@@ -101,6 +95,9 @@ export default defineComponent({ ...@@ -101,6 +95,9 @@ export default defineComponent({
[Badge.name]: Badge, [Badge.name]: Badge,
[Menu.Item.name]: Menu.Item, [Menu.Item.name]: Menu.Item,
GlobalFooter,
SmileOutlined,
}, },
setup() { setup() {
const loading = ref(false); const loading = ref(false);
......
import { createRouter, createWebHistory } from 'vue-router'; import { createRouter, createWebHistory } from 'vue-router';
import type { RouteRecordRaw } from 'vue-router'; import type { RouteRecordRaw } from 'vue-router';
import BasicLayout from './layouts/BasicLayout.vue'; import BasicLayout from './layouts/CustomLayout.vue';
import RouteView from './layouts/RouteView.vue'; import RouteView from './layouts/RouteView.vue';
const routes: RouteRecordRaw[] = [ const routes: RouteRecordRaw[] = [
......
{ {
"name": "@ant-design-vue/pro-layout", "name": "@ant-design-vue/pro-layout",
"version": "3.1.2", "version": "3.1.3",
"license": "MIT", "license": "MIT",
"files": [ "files": [
"dist" "dist"
......
This diff is collapsed.
...@@ -22,7 +22,10 @@ export default defineComponent({ ...@@ -22,7 +22,10 @@ export default defineComponent({
name: 'GlobalFooter', name: 'GlobalFooter',
props: { props: {
links: [Array, Boolean] as PropType<Links>, links: [Array, Boolean] as PropType<Links>,
copyright: [Object, Function] as PropType<VNodeChild | JSX.Element>, copyright: {
type: [Object, Function, Boolean] as PropType<VNodeChild | JSX.Element>,
default: () => undefined,
},
prefixCls: { prefixCls: {
type: String, type: String,
default: 'ant-pro', default: 'ant-pro',
...@@ -35,7 +38,8 @@ export default defineComponent({ ...@@ -35,7 +38,8 @@ export default defineComponent({
(Array.isArray(props.links) && props.links.length === 0)) && (Array.isArray(props.links) && props.links.length === 0)) &&
(props.copyright == null || props.copyright === false) (props.copyright == null || props.copyright === false)
) { ) {
return null; console.warn('[pro-layout]: GlobalFooter required `links` or `copyright`');
return () => null;
} }
const baseClassName = `${props.prefixCls}-global-footer`; const baseClassName = `${props.prefixCls}-global-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