vue實現伸縮菜單功能

3403771864 發布于2022-09-12 20:06 / 784人閱讀

　　效果展示：

　　點擊即可隨意調節菜單寬度

　　變動后

　　頁面結構一共分為三部分，加上一個伸縮按鈕，在你的項目對應的部分都加上class名。

　　我這里定義的分別是box、left、mid、resize(按鈕類名)

　　html

　　頁面結構劃分完成之后，完善一下樣式（直接復制，菜單類名換成你的）

　　/*拖拽區div樣式*/
　　.resize {
　　cursor: col-resize;
　　position: relative;
　　// top: 45%;
　　top: 400px;
　　background-color: #d6d6d6;
　　border-radius: 5px;
　　margin-top: -10px;
　　width: 10px;
　　height: 50px;
　　background-size: cover;
　　background-position: center;
　　font-size: 32px;
　　color: white;
　　}
　　/*拖拽區鼠標懸停樣式*/
　　.resize:hover {
　　color: #444444;
　　}
　　//左側菜單設置百分比寬度，方便拖拽自適應
　　.main_menu {
　　width:22%; /*右側初始化寬度*/
　　height: 100%;
　　background: #BF334E!important;
　　box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.11);
　　}

　　methods里面的拖拽函數：

　　// 拖拽事件
　　dragControllerDiv() {
　　var resize = document.getElementsByClassName('resize')
　　var left = document.getElementsByClassName('left')
　　var mid = document.getElementsByClassName('mid')
　　var box = document.getElementsByClassName('box')
　　for (let i = 0; i < resize.length; i++) {
　　// 鼠標按下事件
　　resize[i].onmousedown = function (e) {
　　//顏色改變提醒
　　resize[i].style.background = '#818181'
　　var startX = e.clientX
　　resize[i].left = resize[i].offsetLeft
　　// 鼠標拖動事件
　　document.onmousemove = function (e) {
　　console.log('鼠標按下')
　　var endX = e.clientX
　　var moveLen = resize[i].left + (endX - startX - 270) // （endx-startx）=移動的距離。resize[i].left+移動的距離=左邊區域最后的寬度
　　var maxT = box[i].clientWidth - resize[i].offsetWidth - 270// 容器寬度 - 左邊區域的寬度 = 右邊區域的寬度
　　console.log(moveLen,maxT)
　　if (moveLen < 32) moveLen = 270 // 左邊區域的最小寬度為32px
　　if (moveLen > maxT - 150) moveLen = maxT - 650 //右邊區域最小寬度為150px
　　resize[i].style.left = moveLen // 設置左側區域的寬度
　　for (let j = 0; j < left.length; j++) {
　　console.log( left[j].style)
　　left[j].style.width = moveLen + 'px'
　　mid[j].style.width = box[i].clientWidth - moveLen - 10 + 'px'
　　}
　　}
　　// 鼠標松開事件
　　document.onmouseup = function (evt) {
　　console.log('鼠標收起')
　　//顏色恢復
　　resize[i].style.background = '#d6d6d6'
　　document.onmousemove = null
　　document.onmouseup = null
　　resize[i].releaseCapture && resize[i].releaseCapture() //當你不在需要繼續獲得鼠標消息就要應該調用ReleaseCapture()釋放掉
　　}
　　resize[i].setCapture && resize[i].setCapture() //該函數在屬于當前線程的指定窗口里設置鼠標捕獲
　　return false
　　}
　　}
　　},

　　mounted里面調用：

　　mounted() {
　　this.dragControllerDiv()
　　},

以上就是全部內容，請大家多多關注。

GPU云服務器云服務器 javascript伸縮菜單 js菜單欄伸縮功能菜單 VUE實現webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127673.html

餓了么組件庫，element-ui開發精美的后臺管理系統系列之（一）開發伸縮菜單

摘要：先看這個值即為判斷顯示展開還是收縮狀態的開關。這樣就實現了展開狀態下的菜單。如果有時間的話，我會把這個系列寫完，知道朋友們能獨立開發一個完整的的單頁面后臺管理程序。涉及到路由，權限等等相關內容的部分，跟本文主旨關系不大，所以我將會在另外一篇文章中詳述，混在一起的話內容太多了基于element-ui的左側可伸縮的菜單通過vuejs來開發支持展開收縮的菜單是非常簡單的，只需要v-i...

whlong 2019-08-21 16:23 評論0 收藏0
Vue.js-Vue實例

摘要：推薦閱讀原文學習筆記實例實例組件間通信組件間通信組件間通信用戶信息表圖書電商數據圖書電商數據圖書電商數據渲染微信精選數據渲染微信精選數據渲染微信推薦閱讀原文學習筆記：Vue實例 Vue實例組件間通信 See the Pen 組件間通信 by whjin (@whjin) on CodePen. 圖書電商數據 See the Pen 圖書電商數據 by whjin (@whji...

shinezejian 2019-08-23 16:03 評論0 收藏0
Jq-簡單伸縮菜單

摘要：豪情第一個展開第一個不展開第一章我的祖國我的祖國我的祖國我的祖國第二章小英雄喜洋洋小英雄喜洋洋小英雄喜洋洋小英雄喜洋洋第三章唐詩宋詞賞析唐詩宋詞賞析唐詩宋詞賞析唐詩宋詞賞析運行代碼豪情$(document).ready(function() { $(dt:first).css(border-top-width,0)...

番茄西紅柿 2021-11-22 15:22 評論0 收藏2637
vue輕量級后臺管理系統基礎模板

摘要：具體實現請查看和的退出登陸回調方法。現在除了必要的頁面需要在一開始添加到路由表里，其他的頁面都可以根據后臺數據來自動生成。另外，如果在未登陸時要訪問某一指定頁面，會重定向到登陸頁，登陸成功后會自動跳到這個指定頁面。項目地址 vue-admin-template 在線預覽更新 2019.6.25 更新修復路由表沖突問題退出當前用戶，換賬號重新登陸時，上個賬號和現在的賬號路由表會有...

2shou 2019-08-23 14:17 評論0 收藏0
管理系統之權限的設計和實現

摘要：基本設計和分析前端服務端主要功能打開思否頁面，根據頁面的功能點，設計出相關的數據表，和管理系統需要的相關頁面。本文主要想對前端權限管理功能實現做一個分享，所以并不會對后臺管理的框架結構做太詳細介紹，如果有朋友對其他有興趣可以留言。基本設計和分析前端 vue + elementui 服務端: node + mysql + nginx 主要功能打開思否頁面，根據頁面的功能點，設...

googollee 2019-08-23 18:21 評論0 收藏0