Vue在頁面右上角實現可懸浮/隱藏的系統選單
這篇文章主要介紹了Vue在頁面右上角實現可懸浮/隱藏的系統選單,實現想法大概是透過props將showCancel這個Boolean值傳遞到子組件，對父子組件分別綁定事件，來控制這個系統選單的顯示狀態。需要的朋友可以參考下
這是大多數網站很常見的功能，點擊頁面右上角頭像顯示一個懸浮選單，點擊頁面其他位置或再次點擊頭像則選單隱藏。
作為一個jQuery前端攻城獅實現這個功能可以說是很easy了，但是對只剛粗看了一遍vue文檔的菜鳥來說，坑還是要親自踩過才算圓滿。
知識點
#元件與元件間通訊
#計算屬性
正文
#1.父元件
這裡暫時只涉及系統選單這一功能，因此路由暫未涉及。
基本想法是：透過props將showCancel這個Boolean值傳遞到子元件，對父子元件分別綁定事件，來控制這個系統選單的顯示狀態。其中在父元件的綁定click事件中，將傳入子元件的showCancel值重設。
這裡就涉及第一個小知識點－子元件呼叫：
先寫好等待被子元件渲染的自訂元素：
<t-header :showCancel=showCancel></t-header>
接著import寫好的子元件：
import THeader from "./components/t-header/t-header";
然後在元件中註冊子元件：
components: {
THeader
}到這裡，新入坑的同學可能會比較疑惑這幾行程式碼是怎樣把子元件對應到
當註冊元件(或prop) 時，可以使用kebab-case (短橫線分隔命名)、camelCase (駝峰式命名) 或PascalCase (單字首字母大寫命名);
在HTML 範本中，請使用kebab-case;
我的理解是（舉例），當自訂元素為
要注意的是，以上使用的是HTML 模板，是在單一檔案元件裡用指定的模板；另外存在一種字串模板，是用在組件選項裡用template: "" 指定的模板。使用字串範本時，自訂標籤可以用三種寫法，具體情況請移步官方文件 元件命名約定。
這樣父元件的雛形就誕生了：
<t-header :showCancel=showCancel></t-header>
<script> import THeader from "./components/t-header/t-header"; export default { name: "app", components: { THeader }, data() { return { showCancel: false }; }, methods: { hideCancel() { this.showCancel = false; } } }; </script>
2. 子元件
子元件中.cancel為開啟系統選單的按鈕，.cancel-p為系統選單，最開始是這個樣子：
<template> <p class="header-wrapper"> /*这里是logo和title*/ ... /*这里是用户名和按钮*/ <p class="info-wrapper"> <span class="username">你好，管理员！</span> <span class="cancel" @click.stop="switchCancelBoard"> <p class="cancel-p" v-show="showCancel"> <ul> <li @click.stop="doSomething" title="用户设置">设置 </li> <li @click.stop="doSomething" title="退出登录">退出 </li> </ul> </p> </span> </p> </p> </template>
@click.stop ="doSomething"
<script>
export default {
props: {
showCancel: {
type: Boolean
}
},
methods: {
doSomething() {},
switchCancelBoard() {
this.showCancel = !this.showCancel;
}
},
computed: {
ifShowCancel() {
return this.showCancel;
}
}
};
</script>##然而第一波踩坑之後一起表明顯然我還是太年輕。以下是一些不好的示範：
prop來的showCancel值的確可以用，點擊子元件按鈕的時候，
this.showCancel=!this.showCancel#實作了選單的顯示/隱藏，但一開啟控制台，每次點擊貢獻了一則報錯：
###################################問題，因為父元件一旦re-render，這個值就會被覆蓋；######另外，儘管在這個按鈕上實現了顯示狀態的切換，但是點擊其他區域的時候，並不會隱藏它，原因是：子元件prop值的變化並沒有影響到父元件，因此showCancel的值一直保持初始值沒有變化，而只有在這個值被更新時才會觸發子元件中相關值的更新。 ######——好吧，那麼老實的用一個計算屬性接收showCancel值，這樣實現點擊子元件控制系統選單的狀態切換；###
获得了计算属性ifShowCancel，组件相应的变成了v-show="ifShowCancel"，我试图在绑定事件里通过this.ifShowCancel=!this.ifShowCancel切换菜单状态，报错，得到报错信息：Computed property "ifShowCancel" was assigned to but it has no setter；
明白了，要以直接赋值的形式改变计算属性ifShowCancel的值，需要一个setter函数，但是setter函数中无法修改prop值，因此在getter中也就无法通过return this.showCancel来更新这个计算属性，所以这个方法貌似也行不通；
到此为止，好像路都成了堵死状态：prop值不能改->要用计算属性；计算属性不能改->需要setter；而写入了getter、setter，计算属性的值依赖于prop值->prop值不能改。——一个堪称完美的闭环诞生了！
走投无路之际我想起了$emit和$on这一对。
3. 父子互相通信
前边的prop实现了从父到子的单向通信，而通过$emit和$on，就可以实现从子组件到父组件的通信：这不能直接修改父组件的属性，但却可以触发父组件的指定绑定事件，并将一个值传入父组件。
在这一步我摒弃了点击按钮时的去操作子组件内属性的想法，既然计算属性ifShowCancel依赖于prop值，那么就在点击按钮时，通过$emit触发父组件的事件，并将需要修改的属性值传入父组件，于是：
/*父组件自定义元素绑定switch-show事件*/
<t-header :showCancel=showCancel @switch-show="switchShow"></t-header>
// 父组件js
methods: {
//会被子组件$emit触发的方法
switchShow(val) {
this.showCancel = val;
}
}
// 子组件js
methods: {
//按钮上的绑定click事件
switchCancelBoard() {
this.$emit("switch-show", this.ifShowCancel);
}
}这样处理流程就变成了：点击按钮->作为计算属性的ifShowCancel值传入父组件并触发父组件事件，对showCancel赋值->父组件属性更新->触发子组件prop更新->触发重新compute，更新ifShowCancel值->v-show起作用。
另外在点击其他区域时，通过父组件绑定的click事件，就可以重置showCancel值，进而隐藏掉出现的系统菜单。
下边放出这个功能的完整代码。
4. 完整代码
/*父组件*/<script> import THeader from "./components/t-header/t-header"; export default { name: "app", components: { THeader }, data() { return { showCancel: false }; }, methods: { hideCancel() { this.showCancel = false; }, switchShow(val) { this.showCancel = val; } } }; </script> /*子组件*/
Title
你好，管理员！
<script> export default { props: { showCancel: { type: Boolean } }, methods: { doSomething() {}, switchCancelBoard() { // this.ifShowCancel = !this.showCancel; this.$emit("switch-show", !this.ifShowCancel); } }, computed: { ifShowCancel() { return this.showCancel; } } }; </script>
- 设置
- 退出
相关推荐：
以上是Vue在頁面右上角實現可懸浮/隱藏的系統選單的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Win11輸入法懸浮窗隱藏設置
Dec 30, 2023 pm 11:24 PM
有些小夥伴對於win11的輸入法懸浮窗功能非常不習慣，使用起來總是怪怪的，因此想要關閉這個懸浮窗功能，現在就給大家介紹一下win11系統下關閉懸浮窗的正確操作方法，一起跟著操作吧。 win11隱藏輸入法懸浮窗1、打開電腦的設定鍵，然後選擇“時間和語言“，進入之後再點擊”輸入“2、在“高級鍵盤設定”裡找到“切換輸入法”，然後把“桌面語言欄」前的勾點上，再進入「語言欄選項」3、開啟後，我們點選這裡的「隱藏「就可以把語言懸浮窗關掉了。
如何隱藏Windows 11工作列圖示？
Jan 06, 2024 am 08:38 AM
在win11系統中，如果我們覺得工作列中的圖示麻煩，可以選擇將它隱藏到任務欄角溢出介面中，不過下方開啟的應用工作列中的圖示是不可以隱藏的，下面就跟著小編來看一下具體的情況吧。 win11工作列圖標怎麼隱藏：一、居中圖標1、首先，如果我們要隱藏下方任務欄中的圖標，可以右鍵選中，點擊“從任務欄取消固定”2、但是如果我們打開了這個應用，並且正在使用它，那就是無法隱藏的。二、右下角圖標1、如果要隱藏右下角的應用程式圖標，先開啟系統設定。 2、然後點選左側邊欄的“個人化”，如圖所示。 3.接著點擊進入右側的工作列
不封鎖不刪除怎麼隱藏微信好友？不封鎖不刪除隱藏微信好友的方法
Mar 13, 2024 pm 07:19 PM
不黑不刪除怎麼隱藏微信好友？不少的用戶們想隱藏一些好友不知道要怎麼去操作，下面就讓本站來為用戶們來仔細的介紹一下不拉黑不刪除隱藏微信好友的方法吧。 不拉黑不刪除隱藏微信好友的方法 方法一： 1、先開啟微信軟體，在微信頁面找到通訊錄，點選」我的「。 2、然後我們進入到設定頁面。 3、找到」隱私「選項，點選進去。 4、接著點擊」不讓他看「。 5、進入到不讓她看頁面，點選」+「勾選需要隱藏的好友
抖音短影片怎麼隱藏作品 隱藏個人影片作品的方法
Mar 12, 2024 pm 12:49 PM
抖音短視頻app軟體內提供的短視頻作品非常多，隨心所欲想看就看，而且都是永久免費提供的，不同類型的視頻直播頻道都是開放的，所有的視頻內容都是原創的，帶給大家最滿意的觀看方式。輸入帳號線上登錄，各種精彩萬分的短視訊推送，都是根據大家日常看的，精準推薦，還能進入直播間與主播互動聊天，讓你的心情更加愉悅。個人上傳的作品也能隱藏起來，非常簡單一鍵設置，刷到哪裡看到哪，上下滑動無數網友的實時評論搶先看，還能分享日常的生活動態，現在小編在線詳細為抖音短視頻用戶推送隱藏個人影片作品的方法。首先打開抖音短
steam隱藏遊戲在哪
Feb 24, 2024 am 11:37 AM
steam中可以隱藏一些不想被看到的遊戲，那麼隱藏遊戲在哪呢？玩家們能夠在查看裡點擊隱藏的遊戲，就能夠在裡面發現自己隱藏的遊戲內容，這篇steam隱藏遊戲位置介紹就能夠告訴大家具體的方法，下面就是詳細的介紹，趕緊來看看吧！ 《steam使用教學》steam隱藏遊戲在哪答：在查看裡點擊隱藏的遊戲具體方法：1、先點擊軟體裡的查看，點擊隱藏的遊戲。 2.點擊之後，在左邊的選單裡就能夠看到隱藏的遊戲。怎麼隱藏遊戲：1、先點擊自己的遊戲庫。 2、選擇一個遊戲，右鍵選擇管理。 3、選擇隱藏此遊戲。
小米14如何隱藏靈動島？
Mar 18, 2024 pm 03:40 PM
除了令人驚嘆的硬體配置和出色的功能，小米14還隱藏著一個讓人著迷的地方—靈動島。在這裡，用戶可以盡情享受個人化客製化以及創意無限的手機體驗。不過不是所有人都喜歡這個功能的，那麼，小米14如何隱藏靈動島呢？讓我們一起了解一下。小米14如何隱藏靈動島？ 1.開啟小米14手機的設定應用程式。 2.捲動找到「特色功能」選項並點選進入。 3.在特色功能頁面中找到「隱藏靈動島」選項並開啟它。 4.確認開啟隱藏靈動島後，返回桌面即可看到靈動島已被隱藏。
抖音隱藏作品的詳細教學
Mar 25, 2024 pm 03:11 PM
1.先點選【+】進行拍攝。 2、然後點選右下角的勾確認完成拍攝。點選】下一步【，3、點選【誰可以看】。選擇【私密】即可，情境二：已拍作品，1、點選【我】，選擇【作品】。 2.點選右旁【三點】標識。 3.向左滑動，找到【權限設定】，4、點擊】設為私密】即可。
深度清理手機隱藏垃圾的方法（徹底清除手機記憶體垃圾）
Jun 01, 2024 am 09:29 AM
手機已經成為我們日常生活中不可或缺的一部分，隨著科技的不斷進步和智慧型手機的普及。這些垃圾檔案佔用了寶貴的儲存空間，隨著時間的推移、手機中會累積大量的隱藏垃圾，並且會導致手機效能下降，然而。了解如何深入清理手機隱藏垃圾成為每個手機用戶必備的知識。一、尋找並清除無用的應用程式快取二、刪除不再使用的應用程式三、清理照片和影片快取四、徹底清理臨時檔案和下載資料夾五、整理和清理聯絡人和簡訊記錄六、清理系統緩存七、卸載無用的系統應用程式八、清理瀏覽器快取和歷史記錄九、刪除無效的音樂和音訊檔案十、優化手機檔案系統
