From b35f0d6e95c72dc03d6f765eb07041ca882f7b3b Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期四, 16 二月 2023 16:16:09 +0800
Subject: [PATCH] 底部菜单交互逻辑
---
src/components/Screen/bottom.vue | 197 +++++++++++++++++++++----------------------------
1 files changed, 85 insertions(+), 112 deletions(-)
diff --git a/src/components/Screen/bottom.vue b/src/components/Screen/bottom.vue
index 53f2033..1fba300 100644
--- a/src/components/Screen/bottom.vue
+++ b/src/components/Screen/bottom.vue
@@ -3,7 +3,13 @@
<div class="bottom1">
<div class="bottom11"></div>
<div class="bottom12">
- <div class="bottombtn">
+ <div
+ :class="currMenu == item.menuName ? 'active' : ''"
+ v-for="item in menuList"
+ :key="item.menuName"
+ class="bottombtn"
+ @click="handleMenuClick(item)"
+ >
<el-popover
popper-class="popover"
placement="top"
@@ -17,58 +23,15 @@
<div class="popover-content__list">
<div
class="popover-content__list__item"
- v-for="item in projectInfoList"
- :key="item.id"
- :class="currProject == item.name ? 'active' : ''"
- @click="handlePopoverClick(item)"
+ v-for="child in item.children"
+ :key="child.id"
+ :class="currProject == child.name ? 'active' : ''"
+ @click="handlePopoverClick(child)"
>
- {{ item.name }}
+ {{ child.name }}
</div>
</div>
</div>
- </el-popover>
- </div>
- <div class="bottombtn">
- <el-popover placement="top" width="100" trigger="click">
- <!-- 鍐呭 -->
- <span slot="reference">宸ョ▼灞曠ず</span>
- <div class="popover-content">
- <div class="popover-content__header">椤圭洰淇℃伅</div>
- <div class="popover-content__list">
- <div
- class="popover-content__list__item"
- v-for="item in displayProject"
- :key="item.id"
- :class="currProject == item.name ? 'active' : ''"
- :title="item.name"
- @click="DisplayCurrentProject(item.name)"
- >
- {{ item.name.length>8?item.name.substring(0,8):item.name }}
- </div>
- </div>
- </div>
- </el-popover>
- </div>
- <div class="bottombtn">
- <el-popover placement="top" width="100" trigger="click">
- <!-- 鍐呭 -->
- <span slot="reference">宸ョ▼宸¤</span>
- <div class="popover-content">
- <div class="popover-content__header">椤圭洰淇℃伅</div>
- <div class="popover-content__list">
- <div
- class="popover-content__list__item"
- v-for="item in FlyProject"
- :key="item.id"
- :class="currProject == item.name ? 'active' : ''"
- :title="item.name"
- @click="FlyCurrentProject(item.name)"
- >
- {{ item.name.length>8?item.name.substring(0,8):item.name }}
- </div>
- </div>
- </div>
-
</el-popover>
</div>
</div>
@@ -87,66 +50,73 @@
return {
YXState: true,
yxImg: require("../../assets/img/Screen/yximg.png"),
+ currMenu: "椤圭洰灞曠ず",
currProject: "鍏ㄧ悆绠＄綉鍥�",
- projectInfoList: [
+ menuList: [
{
- name: "鍏ㄥ浗绠＄綉鍥�",
- id: "qggwt",
+ menuName: "椤圭洰灞曠ず",
+ children: [
+ {
+ name: "鍏ㄥ浗绠＄綉鍥�",
+ id: "qggwt",
+ },
+ {
+ name: "鍏ㄧ悆绠＄綉鍥�",
+ id: "qqgwt",
+ },
+ {
+ name: "鍏ㄥ浗椤圭洰",
+ id: "qgxm",
+ },
+ {
+ name: "鍏ㄧ悆椤圭洰",
+ id: "qqxm",
+ },
+ ],
},
{
- name: "鍏ㄧ悆绠＄綉鍥�",
- id: "qqgwt",
+ menuName: "宸ョ▼灞曠ず",
+ children: [
+ {
+ name: "涓縿涓滅嚎绠￠亾宸ョ▼",
+ id: "zedx",
+ },
+ {
+ name: "瑗挎皵涓滆緭涓夌嚎涓柇绠￠亾宸ョ▼",
+ id: "xqds",
+ },
+ {
+ name: "涓紖澶╃劧姘旂閬撳伐绋�",
+ id: "zmtrq",
+ },
+ {
+ name: "灞变笢瀹樼綉鏂板共绾�",
+ id: "sdxgx",
+ },
+ ],
},
{
- name: "鍏ㄥ浗椤圭洰",
- id: "qgxm",
- },
- {
- name: "鍏ㄧ悆椤圭洰",
- id: "qqxm",
+ menuName: "宸ョ▼宸¤",
+ children: [
+ {
+ name: "涓縿涓滅嚎绠￠亾宸ョ▼",
+ id: "zedx",
+ },
+ {
+ name: "瑗挎皵涓滆緭涓夌嚎涓柇绠￠亾宸ョ▼",
+ id: "xqds",
+ },
+ {
+ name: "涓紖澶╃劧姘旂閬撳伐绋�",
+ id: "zmtrq",
+ },
+ {
+ name: "灞变笢瀹樼綉鏂板共绾�",
+ id: "sdxgx",
+ },
+ ],
},
],
-
- displayProject:[
- {
- name:"涓縿涓滅嚎绠￠亾宸ョ▼",
- id:"zedx"
- },
- {
- name:"瑗挎皵涓滆緭涓夌嚎涓柇绠￠亾宸ョ▼",
- id:"xqds"
- },
- {
- name:"涓紖澶╃劧姘旂閬撳伐绋�",
- id:"zmtrq"
- },
- {
- name:"灞变笢瀹樼綉鏂板共绾�",
- id:"sdxgx"
- },
- ],
- FlyProject:[
- {
- name:"涓縿涓滅嚎绠￠亾宸ョ▼",
- id:"zedx"
- },
- {
- name:"瑗挎皵涓滆緭涓夌嚎涓柇绠￠亾宸ョ▼",
- id:"xqds"
- },
- {
- name:"涓紖澶╃劧姘旂閬撳伐绋�",
- id:"zmtrq"
- },
- {
- name:"灞变笢瀹樼綉鏂板共绾�",
- id:"sdxgx"
- },
- ]
-
-
-
-
}
},
methods: {
@@ -165,28 +135,28 @@
}
this.YXState = !this.YXState
},
- handlePopoverClick(params) {
- this.currProject = params.name
+ handleMenuClick(menu) {
+ this.currMenu = menu.menuName
+ },
+ handlePopoverClick(child) {
+ this.currProject = child.name
},
//椤圭洰灞曠ず
- DisplayCurrentProject(parm){
- console.log(parm);
+ DisplayCurrentProject(parm) {
+ console.log(parm)
//鎵撳紑鎴栬�呭姞杞藉浘灞�
//椋炲埌鎸囧畾浣嶇疆
},
//宸ョ▼婕父椋炶
- FlyCurrentProject(parm){
- console.log(parm);
+ FlyCurrentProject(parm) {
+ console.log(parm)
//鎵撳紑鎴栬�呭姞杞藉浘灞�
//寮�濮嬮琛�
- }
-
-
-
+ },
},
}
</script>
@@ -245,6 +215,10 @@
color: #fff;
font-weight: 600;
cursor: pointer;
+ &.active {
+ background: url(~@/assets/img/Screen/centerbtnc.png);
+ background-size: 100% 100%;
+ }
}
}
@@ -314,7 +288,6 @@
// background-color: aqua;
background: url(~@/assets/img/Screen/btnc.png);
background-size: 100% 100%;
-
}
}
}
--
Gitblit v1.9.3