Vue开发实例（07）之编写头部页面

Posted 2022-12-13 编程界明世隐

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue开发实例（07）之编写头部页面相关的知识，希望对你有一定的参考价值。

作者简介

作者名：编程界明世隐
简介：CSDN博客专家，从事软件开发多年，精通Java、javascript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！

引言

Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！
即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！

概述

在第5节中搭建好了页面的基本框架，现在呢来写一下头部的具体代码，头部就实现3个东西：

加入”欢迎来到xxxxx系统”的字样
编写用户头像显示代码
点击用户头像出现下拉（个人中心、退出登录）

1.、加入”欢迎来到xxxxx系统”的字样

修改第5节中的Header.vue，加入欢迎字样

<template>
        <header>
        <div>
            <h1 style="margin-top: -10px;color: #425049;font-size:30px; ">欢迎来到编程界明世隐的Vue项目</h1>
        </div>
        </header>
</template>

<script>
    export default 
        name: "Header",
        data() 
            return 

            
        
    
</script>

<style scoped>

</style>

2.、编写用户头像显示代码

在template中加入以下代码，用于显示头像，这里用到了 el-avatar 。

<template>
        <header>
        <div>
            <h1 style="margin-top: -10px;color: #425049;font-size:30px; ">欢迎来到编程界明世隐的Vue项目</h1>
        </div>
            <div class="demo-basic--circle">
                <div class="block">
                    <el-avatar :size="40" :src="avatar" :class="['avatar-info']">
                    </el-avatar>
                </div>
            </div>
        </header>
</template>

在style中加入样式

<style scoped>
    header 
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
    
    /*设定头像图片样式*/
    .avatar-info 
        margin-top: 10px;
        margin-right: 40px;
        cursor: pointer;
    
</style>

此时可以看到有个小黑圈，图片没显示出来，因为我们没指定图片的路径，这里我指定图片路径，在data中指定路径即可：

 export default 
        name: "Header",
        data() 
            return 
                avatar: require('@/assets/images/index.jpg')

此时头像已经显示

当然也可以指定图片路径为远程的，比如我指定一个图片网址。

export default 
        name: "Header",
        data() 
            return 
                avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'

效果如下：

3.、点击用户头像出现下拉（个人中心、退出登录）

用户头像点击一般都是选择个人中心、退出登录这些的，这次就来加入这个功能，需要用到el-dropdown，后面具体再讲这个怎么使用，修改template的代码

<template>
        <header>
            <div>
                <h1 style="margin-top: -10px;color: #425049;font-size:30px; ">欢迎来到编程界明世隐的Vue项目</h1>
            </div>
            <div class="opt-wrapper">
                <el-dropdown :hide-on-click="false">
                    <div class="demo-basic--circle">
                        <div class="block">
                            <el-avatar :size="40" :src="avatar" :class="['avatar-info']">
                            </el-avatar>
                        </div>
                    </div>
                    <el-dropdown-menu slot="dropdown" style="margin-top:-30px;margin-left: -40px;">
                        <el-dropdown-item><i class="el-icon-info"></i>个人中心</el-dropdown-item>
                        <el-dropdown-item><i class="el-icon-switch-button"></i>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </header>
</template>

当鼠标移动到头像上，就会出现下拉菜单

Header.vue的完整代码

<template>
        <header>
            <div>
                <h1 style="margin-top: -10px;color: #425049;font-size:30px; ">欢迎来到编程界明世隐的Vue项目</h1>
            </div>
            <div class="opt-wrapper">
                <el-dropdown :hide-on-click="false">
                    <div class="demo-basic--circle">
                        <div class="block">
                            <el-avatar :size="40" :src="avatar" :class="['avatar-info']">
                            </el-avatar>
                        </div>
                    </div>
                    <el-dropdown-menu slot="dropdown" style="margin-top:-30px;margin-left: -40px;">
                        <el-dropdown-item><i class="el-icon-info"></i>个人中心</el-dropdown-item>
                        <el-dropdown-item><i class="el-icon-switch-button"></i>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </header>
</template>

<script>
    export default 
        name: "Header",
        data() 
            return 
                avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
            
        
    
</script>

<style scoped>
    header 
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
    
    /*设定头像图片样式*/
    .avatar-info 
        margin-top: 10px;
        margin-right: 40px;
        cursor: pointer;
    
</style>

小结

这节总结了“编写头部页面”，希望能对大家有所帮助，请各位小伙伴帮忙【点赞】+【收藏】+ 【评论区打卡】，如果有兴趣跟小明哥一起学习Java的，【关注一波】不迷路哦。
请到文章下方帮忙【一键三连】谢谢哈！