Vue+Element实现网页版个人简历系统(推荐)

}
.menupage .el-menu--horizontal>.el-menu-item.is-active,.menupage .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
border-bottom-width: 4px;
}
.menupage .logo-title .el-icon-user{
margin-right: 5px;
}
</style>
<style scoped>
.logo-title{
position: absolute;
left: 100px;
top: 0px;
color:#fff;
font-size:26px;
cursor: pointer;
}
.logo-title img{
width: 80px;
outline:none;
vertical-align: middle;
}
</style>
<script>
export default {
name: 'topMenu',
data () {
return {
activeIndex2: '1'
}
},
methods: {
handleSelect (key, keyPath) {
var name = ''
if (key === '1') name = 'homepage'
if (key === '4') name = 'productpage'
if (key === '3') name = 'securityresearch'
if (key === '2') name = 'aboutus'
var targetEle = document.querySelector('.' + name)
var offsetTop = targetEle.offsetTop
document.documentElement.scrollTop = offsetTop - 150
}
}
}
</script>

2.说明 菜单

菜单的实现使用了element的 NavMenu 导航菜单 组件

菜单整体使用了fixed定位，将其固定在浏览器顶部；并且使用z-index设置菜单堆叠在最顶层。

图标

 

图标采用了element的icon 组件

菜单跳转

我们点击菜单栏的四个选项，页面会自动滚动到对应的视图。对应的实现的函数是handleSelect函数，该函数作用于 NavMenu 导航菜单 提供的select事件的回调函数。

在这里，需要关注的参数为index，它是 <el-menu-item>元素设置的index属性值。

handleSelect函数根据index参数，可以得知当前激活了那个菜单，然后根据菜单的name值，让滚动条至对应的视图。

//点击菜单栏的选择，自动滚动到对应的视图
handleSelect (index, indexPath) {
  var name = ''
  if (index === '1') name = 'homepage'
  if (index === '4') name = 'productpage'
  if (index === '3') name = 'securityresearch'
  if (index === '2') name = 'aboutus'
  var targetEle = document.querySelector('.' + name)
  var offsetTop = targetEle.offsetTop
  document.documentElement.scrollTop = offsetTop - 150
}

三.首页