当前位置:   article > 正文

Vue3入门笔记----实现公共头部样式_vue3 设置公共顶部

vue3 设置公共顶部

这个系列的笔记重点会放在怎么样利用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

上一篇笔记我们记录了怎么实现左侧的公共菜单栏,这一篇讲一下怎么使用公共头部。

创建 CommonHeader.vue 组件

在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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71

代码的整体逻辑是很简单的,解释其中两个地方。

首先是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目录中上传我们的头像文件,大家可以参考代码仓库。

在Main.vue中引用CommonHeader.vue

上面我们已经创建好了主页头部的内容和样式,但是我们还没有使用它,现在来使用它。

前面我们提到过,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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

修改的部分其实很少,在script中引用CommonHeader组件,然后在template中使用就可以。

到这里CommonHeader就实现好了,可以运行项目看一下效果了。

写前端最开心的就是这个时候了,运行之后就能看到实际的效果,但是写后端的时候,如果别人不知道你在干什么,他们其实完全不能理解你的工作,甚至有的时候领导也是这样的。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/542642
推荐阅读
相关标签
  

闽ICP备14008679号