赞
踩
这个系列的笔记重点会放在怎么样利用Vue3把项目架设起来并跟后端API互动,不会介绍Vue的基础特性,关于Vue的基础特性可以参考这个视频四个小时带你快速入门Vue,我是看这个入门的,觉得还不错。
代码地址: https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue-router/vue3-notes
同步发表于个人站点:http://www.panzhixiang.cn/article/2022/10/29/58.html
上一篇笔记我们记录了怎么实现左侧的公共菜单栏,这一篇讲一下怎么使用公共头部。
在src/components/目录下新建一个叫做CommonHeader.vue文件,内容如下:
<template> <el-header> <div class="l-content"> <!-- 这个button本来应该是有用途的,但是与本笔记主体内容无关,所以去除了,只保留样式 --> <el-button size="small" plain> <el-icon :size="20"> <Menu /> </el-icon> </el-button> </div> <div class="r-content"> <el-dropdown> <span class="el-dropdown-link"> <img class="user" :src="getImgSrc()" alt="头像" /> </span> <template #dropdown> <el-dropdown-menu> <el-dropdown-item>我的</el-dropdown-item> <el-dropdown-item>退出</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </el-header> </template> <script> export default { setup() { let getImgSrc = () => { // 参考https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url // console.log(import.meta.url) // console.log(new URL("../assets/images/user.png", import.meta.url)) return new URL("../assets/images/user.png", import.meta.url).href; }; return { getImgSrc, } } } </script> <style lang="less" scoped> header { display: flex; justify-content: space-between; align-items: center; width: 100%; background: #333; } .l-content { display: flex; align-items: center; .el-button { margin-right: 16px; margin-left: 10px; } h3 { color: #fff; } } .r-content { .user { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; } } </style>
代码的整体逻辑是很简单的,解释其中两个地方。
首先是el-icon, 这个是Element Plus中的图标组件,详细内容可以参考图标, 想要解释的是,ElementPlus跟ElementUI在图标的引用上不一样,ElementPlus需要额外安装和注册,具体的步骤可以看前面官方的链接。
还有一个要解释的是getImgSrc这个函数,这个函数的功能其实很简单,就是获取本地的头像文件,这里跟Vue2中有很大的的区别,可以参考https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url。
代码中引用了一个头像,我们现在上传一下,在src/assets/路径下创建一个images目录,在images目录中上传我们的头像文件,大家可以参考代码仓库。
上面我们已经创建好了主页头部的内容和样式,但是我们还没有使用它,现在来使用它。
前面我们提到过,src/views/Main.vue这个文件是我们所有页面共用的一个框架,它的作用的是把整个页面划分为左侧菜单栏,头部和主体展示三个区域,我们现在就为Main.vue添加CommonHeader。
修改之后的代码内容如下:
<template> <div class="common-layout"> <el-container> <el-aside width="180px"> <common-aside></common-aside> </el-aside> <el-container> <el-header> <common-header></common-header> </el-header> <el-main>Main</el-main> </el-container> </el-container> </div> </template> <script> import CommonAside from "../components/CommonAside.vue"; import CommonHeader from "../components/CommonHeader.vue"; export default { components: { CommonAside, CommonHeader, } } </script> <style lang="less" scoped> .common-layout { height: 100%; &>.el-container { height: 100%; &>.el-aside { height: 100%; background: #545c64; } &>.el-container { &>.el-header { padding: 0%; } } } } </style>
修改的部分其实很少,在script中引用CommonHeader组件,然后在template中使用就可以。
到这里CommonHeader就实现好了,可以运行项目看一下效果了。
写前端最开心的就是这个时候了,运行之后就能看到实际的效果,但是写后端的时候,如果别人不知道你在干什么,他们其实完全不能理解你的工作,甚至有的时候领导也是这样的。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。