VUE仿知乎网站(二)-首页header开发

<template>
<header class="main-header">header</header>
</template>

<template>
<div class="home">
<MainHeader></MainHeader>
<router-view></router-view>
</div>
</template>

<script>
//@ is an alias to '/src'
import MainHeader from '@/components/MainHeader.vue'
export default{
name:'Home',
component:{
MainHeader
}
}
</script>

<template>
<header class="main-header">header</header>
</template>

改为

<template>
<header class="main-header">
<div class="header-content">//替代原header内容
<el-menu //菜单外层标签
//属性
:default-active="activeIndex"//默认高亮为1
class=""
mode="horizontal"//菜单横向展示
@select="handleSeclect"//单击触发handleSelect方法
>
<el-menu-item index="0">
<router-link class=""  :to="{name:'Home'}">
<img src="" class="">
</router-link>
</el-menu-item>
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">发现</el-menu-item>
<el-menu-item index="3">话题</el-menu-item>
</el-menu>
</div>
</header>
</template>

<script>
export default{
data(){
return{
activeIndex:"1"//默认高亮选项
};
},
methods:{
handleSelect(key){//选中菜单触发方法
console.log(key)//单击菜单输出当前index
}
}
}
</script>

展示效果:

剩下搜索框和用户信息部分待填
接着上面代码

<template>
<header class="main-header">
<div class="header-content">//替代原header内容
<el-menu //菜单外层标签
//属性
:default-active="activeIndex"//默认高亮为1
class=""
mode="horizontal"//菜单横向展示
@select="handleSeclect"//单击触发handleSelect方法
>
<el-menu-item index="0">
<router-link class=""  :to="{name:'Home'}">
<img src="" class="">
</router-link>
</el-menu-item>
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">发现</el-menu-item>
<el-menu-item index="3">话题</el-menu-item>
//搜索框主体部分
<el-input size="" class="" placeholder="请输入内容" v-model="keywords">
//搜索框icon
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
//提问登录按钮
<el-button size="small" type="primary" class="">提问</el-button>
<div class="" v-if="isLogin">
<router-link :to="{name:'signup'}">登录</router-link>
</div>
//用户信息部分
<div class=""
<i class=""></i>//通知icon
<i class=""></i>//信息icon
//下拉菜单
<el-dropdown trigger="click" placement="bottom" class="">
 <span><img src=""></span>//用户头像
 <el-dropdown-menu slot="dropdown">
   <el-dropdown-item>
     <div @click="goToPersonalPage">
      <span class=""></span>//主页icon
      我的主页
      </div>
    </el-dropdown-item>
    <el-dropdown-item>
     <div @click="goToPersonalPage">
      <span class=""></span>//设置icon
      设置
      </div>
    </el-dropdown-item>
    <el-dropdown-item>
     <div @click="logout">
      <span class=""></span>//退出icon
     退出
      </div>
     </el-dropdown-item>
    </el-dropdown-menu>    
  </el-dropdown> 
 </div>
</el-menu>
</div>
</header>
</template>

<script>
export default{
data(){
return{
activeIndex:"1"，//默认高亮选项
keywords:"",
isLogin:true
};
},
methods:{
handleSelect(key){//选中菜单触发方法
console.log(key)//单击菜单输出当前index
},
goToPersonalPage(){
console.log('转到用户首页')
}
}
</script>