在使用基于 vueelement-ui 实现的后台前端解决方案模板 vue-element-admin 开发后台管理平台时,有时需要在每个页面的底部加上公司版权信息,其实这个挺简单的,具体实现方式如下:

步骤1:创建组件

在文件夹 @/src/layout/components 下创建 CopyRight 文件夹,并在其下创建 index.vue 文件,具体代码如下:

<template>
  <p
    style="display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0.6;
    margin: 20px 0;"
  >
    © 2015-2022
    <el-link
      type="primary"
      href="https://www.****.com/"
      target="_blank"
      style="margin: 0 5px;"
    >********有限公司</el-link>
    版权所有
  </p>
</template>

步骤2:引入、注册并使用组件

修改 @/src/layout/components/AppMain.vue 文件。

修改后的视图代码:

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in" @before-leave="isEnter = false" @after-enter="isEnter = true">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
    <copy-right v-if="isEnter" />
  </section>
</template>

修改后的 js 代码:

<script>
import CopyRight from './CopyRight'

export default {
  name: 'AppMain',
  components: {
    CopyRight
  },
  data() {
    return {
      isEnter: true
    }
  },
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

由于框架引入了路由切换过渡动画 transition,因此需要对引用的 copy-right 组件进行处理,否则会出现闪现。

知识点:

  • before-leave:离开过渡动画之前钩子,离开当前路由先隐藏版权信息组件 copy-right
  • after-enter:进入过渡动画之后钩子,进入新路由页面再显示版权信息组件 copy-right
如果觉得我的文章对你有用,请随意赞赏