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.
367 lines
10 KiB
367 lines
10 KiB
<template>
|
|
<transition :name="customize ? '' : 'menu-collapse'">
|
|
<el-menu v-if="!customize" class="el-menu-vertical-demo custom-menu" @open="handleOpen"
|
|
:default-active="currentMenuItem && currentMenuItem.index" :default-openeds="defaultOpeneds"
|
|
@close="handleClose" @select="handleSelect" :collapse="isCollapse" :collapse-transition="true"
|
|
>
|
|
<div style="height: 100%;padding: 0 0 20px;box-sizing: border-box;">
|
|
<div class="menu-top">
|
|
<span v-show="!isCollapse">
|
|
导航
|
|
</span>
|
|
<GuipToolTip :content="isCollapse ? '展开' : '收起'">
|
|
<img v-if="!isCollapse" class="point" src="../assets/menu-close.svg" @click="changeMenuStatus(true)" alt="">
|
|
<img v-else class="point" src="../assets/menu-open.svg" @click="changeMenuStatus(false)" alt="">
|
|
</GuipToolTip>
|
|
</div>
|
|
<GuipToolTip v-if="isShowCreateBtn" :content="createNewMsg" placement="right" :isShow="isShowCreateMsg" :manual="true">
|
|
<div @click="addSite" class="create-new-site" :class="!isCollapse?'':'create-new-site-short'" >{{!isCollapse ? '创建首个网站' : '建站'}}</div>
|
|
</GuipToolTip>
|
|
<template v-for="item in menuData" >
|
|
<el-submenu v-if="item.children" :key="item.index" :index="item.index">
|
|
<template slot="title">
|
|
<SvgIcon1 :iconPath="require(`@/assets/menu/${item.icon}.svg`)" defaultColor="#8A9099"
|
|
activeColor="#006AFF" :isActive="item.index == currentMenuItem && currentMenuItem['index'].substring(0,1) && isCollapse" />
|
|
<span class="title_text" >{{ item.title }}</span>
|
|
</template>
|
|
<el-menu-item style="padding: 0 22px 0 20px;" v-for="subItem in item.children" :key="subItem.index"
|
|
:index="subItem.index" @click="handleSelect(subItem.index, [item.index, subItem.index], subItem)">
|
|
{{ subItem.title }}
|
|
</el-menu-item>
|
|
</el-submenu>
|
|
<el-menu-item v-else :index="item.index" :key="item.index" @click="handleSelect(item.index, [item.index], item)">
|
|
<div class="flex">
|
|
<SvgIcon1 :iconPath="require(`@/assets/menu/${item.icon}.svg`)" defaultColor="#8A9099"
|
|
activeColor="#006AFF" :isActive="item.index == (currentMenuItem && currentMenuItem['index'])" />
|
|
<span class="title_text" slot="title">{{ item.title}}</span>
|
|
</div>
|
|
</el-menu-item>
|
|
</template>
|
|
</div>
|
|
</el-menu>
|
|
|
|
<SetLeftMenu v-else :menuList="menuData"/>
|
|
</transition>
|
|
|
|
</template>
|
|
<script>
|
|
import SetLeftMenu from '@/components/SetLeftMenu.vue'
|
|
import SvgIcon1 from '@/components/SvgIcon1.vue';
|
|
import GuipToolTip from '@/components/GuipToolTip.vue';
|
|
export default {
|
|
name: 'SliderMenu',
|
|
options: { styleIsolation: "shared" },
|
|
components: {
|
|
SvgIcon1,
|
|
GuipToolTip,
|
|
SetLeftMenu
|
|
},
|
|
props: {
|
|
menuData: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
customize:{
|
|
type:Boolean,
|
|
default:false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isCollapse: false,
|
|
routerList: [],
|
|
currentMenuItem:'',
|
|
currentMenuParent:'',
|
|
isShowCreateBtn: false,
|
|
isShowCreateMsg: false,
|
|
addNewSiteUrl:'/agent/siteAdd',
|
|
createNewMsg: '', // 用户输入
|
|
displayedText: '尽快建网站，售卖服务', // 显示的逐字文字
|
|
typingIndex: 0, // 当前显示到第几个字符
|
|
typingTimer: null
|
|
};
|
|
},
|
|
watch: {
|
|
"$route.path"() {
|
|
if(this.customize)return
|
|
this.updateCurrentMenu();
|
|
},
|
|
},
|
|
computed: {
|
|
defaultOpeneds() {
|
|
if(this.customize)return
|
|
return this.menuData.map(item => item.index);
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取站点列表
|
|
getSiteNo() {
|
|
const that = this
|
|
that.$http('POST', '/agentnew/ajax_get_site_no', {
|
|
}).then(response => {
|
|
if(response.status && response.data){
|
|
that.$nextTick(() => {
|
|
that.isShowCreateBtn = true
|
|
that.createSiteMsg()
|
|
})
|
|
}
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
createSiteMsg() {
|
|
clearInterval(this.typingTimer);
|
|
this.typingTimer = setInterval(() => {
|
|
if (this.typingIndex < this.displayedText.length) {
|
|
this.createNewMsg += this.displayedText.slice(this.typingIndex,this.typingIndex+1);
|
|
this.typingIndex++;
|
|
this.isShowCreateMsg = true;
|
|
} else {
|
|
clearInterval(this.typingTimer);
|
|
setTimeout(()=>{
|
|
this.isShowCreateMsg = false;
|
|
},1500)
|
|
setTimeout(()=>{
|
|
this.createNewMsg = '';
|
|
this.typingIndex = 0;
|
|
this.createSiteMsg()
|
|
},2000)
|
|
}
|
|
}, 200);
|
|
},
|
|
addSite(){
|
|
window.open(this.addNewSiteUrl, '_blank');
|
|
},
|
|
changeMenuStatus(flag) {
|
|
this.isCollapse = flag;
|
|
|
|
this.isShowCreateMsg = false;
|
|
this.createNewMsg = '';
|
|
this.typingIndex = 0;
|
|
clearInterval(this.typingTimer);
|
|
setTimeout(()=>{
|
|
this.createSiteMsg()
|
|
},1000)
|
|
},
|
|
handleOpen(key, keyPath) {
|
|
console.log(key, keyPath);
|
|
},
|
|
handleClose(key, keyPath) {
|
|
console.log(key, keyPath);
|
|
},
|
|
// handleSelect(index,indexPath) {
|
|
// this.activeMenu = index;
|
|
// console.log(index,indexPath, '---index');
|
|
// // 找到被点击的 menu 项对应的 path
|
|
// const allItems = this.menuData.flatMap(menu => menu.children);
|
|
// const targetItem = allItems.find(item => item.index === index);
|
|
|
|
// if (targetItem && this.$route.path !== targetItem.path) {
|
|
// this.$router.push(targetItem.path);
|
|
// }
|
|
// },
|
|
handleSelect(index, indexPath, menuItem) {
|
|
if (menuItem.path && this.$route.path !== menuItem.path) {
|
|
this.$router.push(menuItem.path);
|
|
}
|
|
},
|
|
updateCurrentMenu() {
|
|
const result = this.findMenuItemByPath(this.menuData, this.$route.path);
|
|
this.currentMenuItem = result?.item;
|
|
},
|
|
findMenuItemByPath(menuItems, targetPath, parent = null) {
|
|
for (const item of menuItems) {
|
|
if (item.path === targetPath) return { item, parent };
|
|
if (item.children?.length) {
|
|
const found = this.findMenuItemByPath(item.children, targetPath, item);
|
|
if (found) return found;
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
},
|
|
mounted() {
|
|
// console.log(this.$route.path,'this.$route.path----');
|
|
// const allItems = this.menuData.flatMap(menu =>menu.children ? menu.children?.map(child => ({ ...child, parentIndex: menu.index })) : menu.children);
|
|
// console.log(allItems,'=====');
|
|
// const current = allItems.find(item => item.path === this.$route.path);
|
|
// this.activeMenu = current ? current.index : '';
|
|
// this.defaultOpeneds = current ? [current.parentIndex] : [];
|
|
|
|
// this.routerList = this.$router.options.router;//配置路由
|
|
// console.log(this.$route.path, this.$router.options.router, 'this.$route.path===');
|
|
// // 初始化时设置默认激活的菜单项
|
|
// this.activeMenu = this.$route.path;
|
|
this.updateCurrentMenu();
|
|
this.getSiteNo()
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.menu-collapse-leave-active,
|
|
.menu-collapse-enter-active {
|
|
transition: all 0.5s;
|
|
}
|
|
|
|
.menu-collapse-enter,
|
|
.menu-collapse-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(-30px);
|
|
}
|
|
|
|
.el-menu--vertical {
|
|
.el-menu-item {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
|
|
}
|
|
|
|
}
|
|
::v-deep .el-menu-item.is-active .title_text{
|
|
font-weight: bold;
|
|
color: #006AFF !important;
|
|
}
|
|
|
|
.title_img {
|
|
width: 16px;
|
|
margin-right: 4px;
|
|
}
|
|
.title_text {
|
|
margin-left: 4px;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
display: block;
|
|
color: #1E2226;
|
|
}
|
|
|
|
.el-menu--collapse .title_text {
|
|
display: none;
|
|
}
|
|
|
|
::v-deep .el-submenu__icon-arrow {
|
|
display: none;
|
|
}
|
|
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
width: 158px;
|
|
min-width: 158px;
|
|
min-height: calc(100vh - 62px);
|
|
box-shadow: 0px 0px 11px 2px rgba(147, 147, 147, 0.11);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.el-menu-item {
|
|
padding: 0 22px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.menu-top {
|
|
background: #FFFFFF;
|
|
box-sizing: border-box;
|
|
/* middle/middle_line_1 */
|
|
border-width: 0px 0px 1px 0px;
|
|
border-style: solid;
|
|
border-color: #DFE2E6;
|
|
padding: 15px 0px;
|
|
margin: 0 22px;
|
|
display: flex;
|
|
font-size: 14px;
|
|
color: #1E2226;
|
|
font-weight: bold;
|
|
line-height: normal;
|
|
letter-spacing: 0.08em;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 14px;
|
|
height: 14px;
|
|
|
|
}
|
|
}
|
|
|
|
.create-new-site{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 11px 12px;
|
|
border-radius: 4px;
|
|
background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%);
|
|
font-size: 14px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
margin: 0 20px;
|
|
}
|
|
.create-new-site-short{
|
|
margin: 0 5px;
|
|
}
|
|
|
|
::v-deep .el-submenu {
|
|
// width: 16px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
::v-deep .el-submenu .el-menu-item {
|
|
min-width: 138px;
|
|
width: 100%;
|
|
}
|
|
|
|
::v-deep .el-submenu__title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
::v-deep .el-submenu__title:hover {
|
|
background-color: transparent;
|
|
// cursor: not-allowed;
|
|
}
|
|
|
|
::v-deep .el-submenu__title .el-submenu__icon-arrow.el-icon-arrow-down {
|
|
// display: none;
|
|
}
|
|
|
|
::v-deep .el-submenu .el-menu-item {
|
|
padding: 0 22px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
::v-deep .el-submenu .el-menu-item {
|
|
height: 36px;
|
|
}
|
|
|
|
::v-deep.el-submenu .el-menu-item {
|
|
height: 36px;
|
|
line-height: 36px;
|
|
color: #8A9099;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
::v-deep .el-menu-item:hover {
|
|
background: #F6F7FA;
|
|
}
|
|
|
|
::v-deep .el-menu-item.is-active {
|
|
color: #006AFF;
|
|
font-weight: bold;
|
|
}
|
|
|
|
// .el-submenu .el-menu {
|
|
// transition: all 0.3s ease;
|
|
// }
|
|
|
|
// .el-menu--collapse .el-submenu > .el-menu {
|
|
// display: block !important;
|
|
// overflow: hidden;
|
|
// transition: all 0.3s ease;
|
|
// opacity: 0;
|
|
// height: 0;
|
|
// transform: translateY(-10px);
|
|
// }
|
|
|
|
// .el-menu--collapse .el-submenu.is-opened > .el-menu {
|
|
// opacity: 0;
|
|
// height: 0;
|
|
// }
|
|
</style>
|