About the Author
Author name: Programming Ming Ming Shiyin
Introduction: CSDN blog expert, has been engaged in software development for many years, proficient in Java, JavaScript, bloggers also learn and grow step by step from scratch, know the importance of learning and accumulation, and like to play with the majority of ADCs Wild Upgrade, welcome your attention, and look forward to learning, growing, and taking off with you!
introduction
Vue is one of the most popular front-end frameworks. As a front-end developer, you should master it proficiently. If you plan to learn the development process of Vue, then come on, Brother Ming will take you to get started quickly and take you to fly!
Even if you are not a front-end developer, it is necessary to have a certain understanding of the front-end development process. No one is sure whether the company will let me do the front-end in the future. It does not take a lot of time to do some simple examples. It can improve your self-confidence and sense of accomplishment, so follow Brother Ming, there is nothing wrong, come on!
navigation
✪ General index of Vue development example directory ◄ Previous [06] Vue3 registration Element-ui error solution ► Next [08] Icon icon usage
overview
In Section 5, the basic framework of the page is built. Now let’s write the specific code of the header. The header implements 3 things:
- Add the words "Welcome to xxxxx system"
- Write user avatar display code
- Click on the user's avatar and a drop-down will appear (Personal Center, Logout)
1. Add the words "Welcome to xxxxx system"
Modify Header.vue in section 5, add welcome words
<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. Write code for user avatar display
Add the following code to the template to display the avatar, and el-avatar is used here.
<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>
Add style to 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>
At this time, you can see a small black circle, and the picture is not displayed, because we did not specify the path of the picture, here I specify the path of the picture, just specify the path in data:
export default {
name: "Header",
data() {
return {
avatar: require('@/assets/images/index.jpg')
}
}
}
At this point the avatar is displayed
Of course, you can also specify the image path as remote, for example, I specify an image URL.
export default {
name: "Header",
data() {
return {
avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
}
}
}
The effect is as follows:
3. Click the user's avatar and a drop-down will appear (personal center, logout)
Clicking on the user's avatar is usually to select the personal center, log out and log in. This time, we will add this function. We need to use el-dropdown. We will talk about how to use it later and modify the code of the 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>
When the mouse moves over the avatar, a drop-down menu will appear
The complete code of 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>
summary
This section summarizes "Writing the header page", I hope it can be helpful to everyone, please help [Like] + [Favorite] + [Punch in the comment area] If you are interested in learning Java with Brother Xiaoming, [Follow a wave] Don't get lost.
Please go to the bottom of the article to help [One-click three links] Thank you!
navigation
✪ General index of Vue development example directory ◄ Previous [06] Vue3 registration Element-ui error solution ► Next [08] Icon icon usage
Popular column recommendation
【1】Java mini-games (Tetris, Plants vs. Zombies, etc.) 【
2】JavaWeb project combat (library management, dormitory management, etc.)
【3】JavaScript wonderful examples (aircraft wars, verification codes, etc.)
200 cases
[5] Learn Java from zero, learn Java with fun
[6] IDEA from zero to proficient
