Ant Design Pro (五) 修改Footer

修改Footer

原来的Footer

在这里插入图片描述

修改代码

在src\components\Footer\index.tsx修改代码为

// import { useIntl } from 'umi';
import { GithubOutlined } from '@ant-design/icons';
import { DefaultFooter } from '@ant-design/pro-layout';
import NoticeIcon from '../NoticeIcon/NoticeIcon';
import { HeartTwoTone } from '@ant-design/icons';

export default () => {
  // const intl = useIntl();
  // const defaultMessage = intl.formatMessage({
  //   id: 'app.copyright.produced',
  //   defaultMessage: '蚂蚁集团体验技术部出品',
  // });

  const currentYear = new Date().getFullYear();
  const defaultMessage = "听我一言-技术修改"

  return (
    <DefaultFooter
      copyright={`${currentYear} ${defaultMessage}`}
      links={[
        {
          key: 'listening2',
          title: '听我一言',
          href: 'https://blog.csdn.net/halo_hsuh?spm=1000.2115.3001.5113',
          // href: 'https://pro.ant.design',
          blankTarget: true,
        },
        {
          key: 'hearticon',
          title: <HeartTwoTone twoToneColor="#eb2f96" />,
          href: 'https://blog.csdn.net/halo_hsuh?spm=1000.2115.3001.5113',
          // href: 'https://github.com/ant-design/ant-design-pro',
          blankTarget: true,
        },
        {
          key: 'listening2',
          title: '听我一言',
          href: 'https://blog.csdn.net/halo_hsuh?spm=1000.2115.3001.5113',
          // href: 'https://ant.design',
          blankTarget: true,
        },
      ]}
    />
  );
};


效果

在这里插入图片描述
Ant Design Pro 使用笔记

参考:
插入图标

要移除Ant Design Pro Vue2的刷新页面功能,您可以按照以下步骤进行操作: 1. 打开/src/layouts/BasicLayout.vue文件。 2. 找到以下代码段: ```javascript <template> <a-layout class="basic-layout"> <a-layout-header :style="headerStyle"> <Header :menuData="menuData" /> </a-layout-header> <a-layout-content> <div class="basic-container"> <KeepAlive> <router-view /> </KeepAlive> </div> </a-layout-content> <a-back-top /> <a-layout-footer style="text-align: center;"> {{ footerText }} </a-layout-footer> </a-layout> </template> ``` 3. 将 KeepAlive 组件上面添加一个标记,例如: ```javascript <template> <a-layout class="basic-layout"> <a-layout-header :style="headerStyle"> <Header :menuData="menuData" /> </a-layout-header> <a-layout-content> <div class="basic-container" v-if="!shouldReload"> <KeepAlive> <router-view /> </KeepAlive> </div> <div v-else> <router-view /> </div> </a-layout-content> <a-back-top /> <a-layout-footer style="text-align: center;"> {{ footerText }} </a-layout-footer> </a-layout> </template> ``` 4. 在<script>标签内添加以下代码: ```javascript export default { data() { return { shouldReload: false, }; }, created() { this.$bus.$on('routeChange', () => { this.shouldReload = true; }); this.$bus.$on('routeChanged', () => { this.shouldReload = false; }); }, }; ``` 5. 保存文件并重启应用程序。 现在,您应该能够在Ant Design Pro Vue2应用程序中移除刷新页面功能。如果您需要重新启用该功能,请按照相同的步骤进行操作,并将shouldReload属性设置为true。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

听我一言

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值