当前位置: 首页> 文旅> 美景 > Vue3实战笔记(39)—封装页脚组件,附源码

Vue3实战笔记(39)—封装页脚组件,附源码

时间:2025/7/10 7:48:15来源:https://blog.csdn.net/loveshenhaitao/article/details/139157581 浏览次数:0次

文章目录

  • 前言
  • 一、封装页脚组件
  • 二、使用组件
  • 总结


前言

在Web开发中,页脚组件是一个重要的部分,它为用户提供关于网站的信息、导航链接以及版权声明等。而封装页脚组件则是一种高效的方法,可以提高代码的可重用性和可维护性。


一、封装页脚组件

话不多说直接干Footer.vue:


<template><v-footer name="footer" class="justify-end" app><div class="mx-2 "><b>Version</b> 1.1.0</div><strong class="mx-2">Copyright &copy; 2019 <a href="#" class="mx-2">top.xy</a>.All rights reserved.</strong><!-- mx-auto 居中 --><v-btn class="text-decoration-underline elevation-10" variant="text" @click="goabout">联系我们<v-icon>mdi-account-box</v-icon></v-btn></v-footer><v-bottom-navigation><v-btn value="recent"><v-icon>mdi-history</v-icon><span>Recent</span></v-btn><v-btn value="favorites"><v-icon>mdi-heart</v-icon><span>Favorites</span></v-btn><v-btn value="nearby"><v-icon>mdi-map-marker</v-icon><span>Nearby</span></v-btn></v-bottom-navigation>
</template><script lang="ts" setup name="">
//路由器
import {RouterLink, useRouter} from 'vue-router'
const router = useRouter()function goabout(){router.push({path:'/about' })
}
</script><style lang='scss' scoped></style>

二、使用组件

在布局页使用:


<template ><v-layout ref="app" class="rounded rounded-md"><v-app><Navigation app="false"></Navigation><AppBar></AppBar><v-main><router-view v-slot="{ Component }" ><transition name="bounce" mode="out-in"><div><component :is="Component" /></div></transition></router-view></v-main></v-app><Footer></Footer></v-layout></template><script lang="ts">
</script>

运行效果:
在这里插入图片描述


总结

使用到了vuetify的两个组件:v-bottom-navigation和v-footer,由于都在底部展示,就直接先都当作Footer组件吧,如果后续底部想做的内容更多,再分别封装。

禅心无住,而生其心。

关键字:Vue3实战笔记(39)—封装页脚组件,附源码

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: