| Vue开发实例（07）之编写头部页面 | 您所在的位置：网站首页 › 版头样式 › Vue开发实例（07）之编写头部页面 |
Vue开发实例（07）之编写头部页面
|
作者简介
作者名：编程界明世隐 简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！ 引言Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ 即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！ 导航✪ Vue开发实例目录总索引 ◄ 上一篇【06】Vue3注册Element-ui报错解决 ► 下一篇【08】Icon图标的使用 概述在第5节中搭建好了页面的基本框架，现在呢来写一下头部的具体代码，头部就实现3个东西： 加入”欢迎来到xxxxx系统”的字样编写用户头像显示代码点击用户头像出现下拉（个人中心、退出登录） 1.、加入”欢迎来到xxxxx系统”的字样修改第5节中的Header.vue，加入欢迎字样 欢迎来到编程界明世隐的Vue项目 export default { name: "Header", data() { return { } } }
在template中加入以下代码，用于显示头像，这里用到了 el-avatar 。 欢迎来到编程界明世隐的Vue项目在style中加入样式 header { display: flex; align-items: center; justify-content: space-between; color: #fff; } /*设定头像图片样式*/ .avatar-info { margin-top: 10px; margin-right: 40px; cursor: pointer; }
此时可以看到有个小黑圈，图片没显示出来，因为我们没指定图片的路径，这里我指定图片路径，在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' } } }效果如下： 用户头像点击一般都是选择个人中心、退出登录这些的，这次就来加入这个功能，需要用到el-dropdown，后面具体再讲这个怎么使用，修改template的代码 欢迎来到编程界明世隐的Vue项目 个人中心 退出登录当鼠标移动到头像上，就会出现下拉菜单 这节总结了“编写头部页面”，希望能对大家有所帮助，请各位小伙伴帮忙 【点赞】+【收藏】+ 【评论区打卡】， 如果有兴趣跟小明哥一起学习Java的，【关注一波】不迷路哦。 请到文章下方帮忙【一键三连】谢谢哈！
✪ Vue开发实例目录总索引 ◄ 上一篇【06】Vue3注册Element-ui报错解决 ► 下一篇【08】Icon图标的使用 热门专栏推荐【1】Java小游戏（俄罗斯方块、植物大战僵尸等） 【2】JavaWeb项目实战（图书管理、宿舍管理等） 【3】JavaScript精彩实例（飞机大战、验证码等） 【4】Java小白入门200例 【5】从零学Java、趣学Java 【6】IDEA从零到精通 |
【本文地址】