8.Home頁的Title製作和下拉選單
阿新 • • 發佈：2020-08-06
使用Element UI中的Container佈局容器
複製的程式碼如下，把複製的程式碼放到Home.vue的template標籤中,顯示效果如下圖
<template> <div> <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-container> </div> </template>
給Header加上個class屬性，然後設定header的背景顏色，瀏覽器顯示效果如下：
在vuehr專案的public資料夾裡面的index.html頁面的body標籤上加上style="margin:0px;padding:0px;";顯示效果如下圖
配置下拉選單
把下拉選單的程式碼複製到微人事字型的下面，效果如下
<template> <div> <el-container class="homeHeader"> <el-header class="title">微人事</el-header> <template> <div> <el-container> <el-header class="homeHeader"> <div class="title">微人事</div> <el-dropdown> <span class="el-dropdown-link"> 下拉選單<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>黃金糕</el-dropdown-item> <el-dropdown-item>獅子頭</el-dropdown-item> <el-dropdown-item>螺螄粉</el-dropdown-item> <el-dropdown-item disabled>雙皮奶</el-dropdown-item> <el-dropdown-item divided>蚵仔煎</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-container> </div> </template> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-container> </div> </template>
把這個下拉選單和下拉選單下面的改一下
<template> <div> <el-container> <el-header class="homeHeader"> <div class="title">微人事</div> <el-dropdown class="userInfo" @command="commandHandler"> <!--@command="commandHandler" 點選選單項觸發的事件回撥--> <span class="el-dropdown-link"> {{user.name}}<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="userInfo">個人中心</el-dropdown-item> <el-dropdown-item command="setting">設定</el-dropdown-item> <!--disabled:禁用的 divided:有分隔線--> <el-dropdown-item command="logout" divided>登出登入</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-container> </div> </template> <script> export default { name: "Home", data(){ return{ user:JSON.parse(window.sessionStorage.getItem("user")) //這樣得到的資料是字串，要用JSON.parse方法吧字串轉換成json資料 } }, methods:{ commandHandler(cmd){ //該方法有一個引數，cmd if(cmd=='logout'){ } } } } </script> <style> .homeHeader{ background-color:#409eff; display: flex; align-items: center; /*豎軸上居中*/ justify-content:space-between; /*空白的地方在中間*/ padding: 0 15px; box-sizing: border-box; } .title{ font-size: 30px; font-family: 華文行楷; color: #ffffff; } .userInfo{ cursor: pointer; } </style>
每個下拉選單都是一個點選按鈕，所以要給下拉選單新增點選事件，可以使command=" "點選選單項觸發的事件回撥
然後在
再帶script標籤裡面加上method方法
<template>
<div>
<el-container>
<el-header class="homeHeader">
<div class="title">微人事</div>
<el-dropdown class="userInfo" @command="commandHandler"> <!--@command="commandHandler" 點選選單項觸發的事件回撥-->
<span class="el-dropdown-link">
{{user.name}}<i><img :src="user.userface" alt=""></i> <!--i標籤表示目標-->
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="userInfo">個人中心</el-dropdown-item>
<el-dropdown-item command="setting">設定</el-dropdown-item> <!--disabled:禁用的 divided:有分隔線-->
<el-dropdown-item command="logout" divided>登出登入</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-container>
<el-aside width="200px">
Aside
</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
user: JSON.parse(window.sessionStorage.getItem("user")) //這樣得到的資料是字串，要用JSON.parse方法吧字串轉換成json資料
}
},
methods: {
commandHandler(cmd) { //該方法有一個引數，cmd
if (cmd == 'logout') {
this.$confirm('此操作將登出登入, 是否繼續?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.getRequest("/logout"); //使用封裝好的getRequest方法，引數寫登出登入的地址
window.sessionStorage.removeItem("user")
this.$router.replace("/");
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
});
});
}
}
}
}
</script>
<style>
.homeHeader {
background-color: #409eff;
display: flex;
align-items: center; /*豎軸上居中*/
justify-content: space-between; /*空白的地方在中間*/
padding: 0 15px;
box-sizing: border-box;
}
.title {
font-size: 30px;
font-family: 華文行楷;
color: #ffffff;
}
.userInfo {
cursor: pointer;
}
.el-dropdown-link img{
width: 48px;
height: 48px;
border-radius: 24px;
margin-left: 8px;
}
.el-dropdown-link{
display: flex;
align-items: center;
}
</style>
從登入頁面點選登入會提示登入成功
在api.js中加入
//登陸成功提示
if(success.data.msg){
Message.success({message:success.data.msg})
}
從下拉選單點選登出登入 ，會出現提示，此操作將登出登入，是否繼續？有取消和確定按鈕，點選確定會登出成功並跳轉到登入頁面