vue-element-admin 内部页面增加版权信息

在使用基于 vue 和 element-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>

知识点：

• before-leave：离开过渡动画之前钩子，离开当前路由先隐藏版权信息组件 copy-right。
• after-enter：进入过渡动画之后钩子，进入新路由页面再显示版权信息组件 copy-right。

版权属于：瞭月

本文链接：https://www.lervor.com/archives/260/

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。