Vue开发实例(07)之编写头部页面
作者简介
作者名:编程界明世隐
简介:CSDN博客专家,从事软件开发多年,精通Java、JavaScript,博主也是从零开始一步步把学习成长、深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢迎您关注,期待与您一起学习、成长、起飞!
引言
Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,如果你是打算学习Vue的开发流程,那么来吧,明哥带你快速上手、带你飞!
即使你并非前端开发人员,对前端的开发流程进行一定的了解也是很有必要的,谁也不确定公司以后会不会让我做前端去,做些简单的实例既不需要花费很多时间,也可以提高自己的自信和成就感,所以跟着明哥走,没有错,来吧!
导航
✪ Vue开发实例目录总索引
◄ 上一篇【06】Vue3注册Element-ui报错解决
► 下一篇【08】Icon图标的使用
概述
在第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的,【关注一波】不迷路哦。
请到文章下方帮忙【一键三连】谢谢哈!
导航
✪ Vue开发实例目录总索引
◄ 上一篇【06】Vue3注册Element-ui报错解决
► 下一篇【08】Icon图标的使用
热门专栏推荐
【1】Java小游戏(俄罗斯方块、植物大战僵尸等)
【2】JavaWeb项目实战(图书管理、宿舍管理等)
【3】JavaScript精彩实例(飞机大战、验证码等)
【4】Java小白入门200例
【5】从零学Java、趣学Java
【6】IDEA从零到精通
相关文章
- vue - Vue介绍
- Vue + element-ui 【前端项目一】Table 表格并实现分页 2
- 【Vue】通过Animate.css实现第三方动画效果示例(图文+实例)
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- Vue - 最新网页 H5 分享到微信朋友圈 / 转发分享给朋友好友 / 分享到手机 QQ / 分享到 QQ 空间,Vue.js Nuxt.js 通用公众号页面解决方案(超级详细教程)
- [转]Vue CLI 3搭建vue+vuex 最全分析
- cordova+vue
- Vue项目 跨域 解决方案与 vue.config.js 配置解析
- Vue--安装与HelloWord--MVVM模式小实例
- VUE-016-CSS 控制 div 层级显示为最顶层,CSS层级样式控制实例
- Vue+Echarts监控大屏实例十三:网络态势感知监控模板实例下
- Vue+Echarts监控大屏实例四:智慧农业监控模板实例
- vue实战入门基础篇八:从零开始仿门户网站实例-全局检索实现
- [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解
- vue集成cesium,webgis平台第一步(附源码下载)
- Vue组件开发实例(详细注释)
- vue基础四(comment实例)
- vscode快速生成vue代码---创建Vue代码模板
- 解决:Vue调试工具vue-devtools安装方法——解决下载速度缓慢,安装报错问题
- Vue开发实例(20)之实现登录功能
- Vue开发实例(12)之实现动态左侧菜单导航
- Vue开发实例(03)之Vue项目引入element_ui
- vue-cli + webpack 多页面实例配置优化方法
- ejs结合vue实现SSR ,express+ejs+vue = 服务器端渲染 ?Vue-SSR的奇思妙想