You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
3.9 KiB
151 lines
3.9 KiB
<template> |
|
<div> |
|
<el-menu :class="['nav', {home: isHome}]" ref="type" :key="menuRefresh" mode="horizontal" menu-trigger="click" :background-color="bgColor" :text-color="textColor" :active-text-color="activeTextColor" @open="jump" @select="jump" :default-active="String(active)"> |
|
<menuTree :menuList="menus"/> |
|
</el-menu> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import Setting from '@/setting' |
|
import menuTree from '@/components/menuTree' |
|
export default { |
|
data() { |
|
return { |
|
site: this.$store.state.content.site, |
|
isHome: this.$route.path === '/home', |
|
active: this.$route.query.id, |
|
menus: [], |
|
bgColor: '#fff', |
|
textColor: '#333', |
|
activeTextColor: '#1583FF', |
|
menuRefresh: 1, |
|
toItem: {} |
|
}; |
|
}, |
|
components: { |
|
menuTree |
|
}, |
|
watch: { |
|
'$route'() { |
|
this.isHome = this.$route.path === '/home' |
|
this.handleColor() |
|
} |
|
}, |
|
mounted() { |
|
this.handleColor() |
|
this.getColumn() |
|
}, |
|
methods: { |
|
// 资讯 |
|
getColumn() { |
|
this.$post(this.api.listWithTreeMenuVisible, { |
|
siteId: this.$route.query.siteId || this.site, |
|
columnName: '', |
|
templateId: '', |
|
typeId : '', |
|
isSort: 1 |
|
}).then(({ data }) => { |
|
this.menus = data |
|
if (!this.active && data.length) this.active = data[0].id |
|
}).catch(err => {}) |
|
}, |
|
// 改变菜单颜色 |
|
handleColor() { |
|
const home = this.isHome |
|
this.bgColor = home ? 'transparent' : '#fff' |
|
this.textColor = home ? '#fff' : '#333' |
|
// this.menuRefresh++ |
|
}, |
|
// 获取点击菜单的路径 |
|
getPath(data, id) { |
|
for (const e of data) { |
|
if (e.id == id) { |
|
this.toItem = e |
|
break |
|
} else { |
|
this.getPath(e.children ,id) |
|
} |
|
} |
|
}, |
|
// 跳转 |
|
jump(id) { |
|
this.getPath(this.menus ,id) |
|
const to = this.toItem |
|
const { typeId } = to |
|
// 跳转链接 |
|
if (typeId === 2) { |
|
let href = to.linkAddress |
|
const cType = to.connectionType |
|
if (cType !== 2) { // 非站外链接 |
|
const ids = href.split('-') // 栏目文章是用-分割的，栏目是必选，文章不是必选。选择了文章则跳转到文章页，否则跳转到栏目页 |
|
// 站点id：站内链接取当前站点，其他站点链接取siteSelection |
|
const site = cType === 1 ? |
|
(this.$route.query.siteId || this.site) : |
|
to.siteSelection |
|
if (ids[1]) { // 文章 |
|
href = '/article?id=' + ids[1] |
|
} else { // 栏目 |
|
const columnIds = ids[0].split(',') |
|
href = '/column?id=' + columnIds[columnIds.length - 1] |
|
} |
|
href = this.$router.resolve(href + '&siteId=' + site).href |
|
} |
|
// 是否新窗口打开 |
|
if (to.isOpen) { |
|
window.open(href) |
|
} else { |
|
location.href = href |
|
} |
|
} else if (typeId !== 4 || (typeId === 4 && !to.children.length)) { |
|
// 常规栏目跳转到column页，长页栏目直接获取path |
|
this.$router.push(`/${typeId === 3 ? to.path : 'column'}?id=${id}`).catch(err => {}) |
|
} |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
$height: 90px; |
|
/deep/.nav.el-menu--horizontal { |
|
position: absolute; |
|
top: 0; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
border: 0; |
|
.el-menu-item, .el-submenu__title { |
|
height: $height; |
|
line-height: $height; |
|
span { |
|
font-size: 14px; |
|
} |
|
&:hover { |
|
background-color: transparent !important; |
|
span { |
|
color: #1583FF; |
|
} |
|
} |
|
} |
|
.el-submenu__title { |
|
display: inline-flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
.menu-child { |
|
display: flex; |
|
} |
|
.el-submenu__icon-arrow { |
|
position: static; |
|
margin: 0 0 0 5px; |
|
color: inherit; |
|
} |
|
} |
|
@media (max-width: 1500px) { |
|
/deep/.nav { |
|
.el-menu-item { |
|
padding: 0 8px; |
|
} |
|
} |
|
} |
|
</style> |