在使用基于 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>
由于框架引入了路由切换过渡动画
transition
,因此需要对引用的 copy-right
组件进行处理,否则会出现闪现。
知识点:
before-leave
:离开过渡动画之前钩子,离开当前路由先隐藏版权信息组件copy-right
。after-enter
:进入过渡动画之后钩子,进入新路由页面再显示版权信息组件copy-right
。
版权属于:瞭月
本文链接:https://www.lervor.com/archives/260/
版权声明:本文为瞭月原创文章,转载请附上原文出处链接和本声明。