vue實(shí)現(xiàn)伸縮菜單功能
更新時(shí)間：2022年07月14日 11:10:49 作者：suoh's Blog
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)伸縮菜單功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)伸縮菜單的具體代碼，供大家參考，具體內(nèi)容如下
先看效果：
點(diǎn)擊圖片按鈕可調(diào)整菜單寬度
伸縮后
頁(yè)面結(jié)構(gòu)一共分為三部分，加上一個(gè)伸縮按鈕，在你的項(xiàng)目對(duì)應(yīng)的部分都加上class名。
我這里定義的分別是box、left、mid、resize(按鈕類名)
html
頁(yè)面結(jié)構(gòu)劃分完成之后，完善一下樣式（直接復(fù)制，菜單類名換成你的）
/*拖拽區(qū)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;
}
/*拖拽區(qū)鼠標(biāo)懸停樣式*/
.resize:hover {
? ? color: #444444;
}
//左側(cè)菜單設(shè)置百分比寬度，方便拖拽自適應(yīng)
.main_menu {
? ? width:22%; /*右側(cè)初始化寬度*/
? ? height: 100%;
? ? background: #BF334E!important;
? ? box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.11);
}methods里面的拖拽函數(shù)：
// 拖拽事件
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++) {
? ? ? ? ? ? ? ? // 鼠標(biāo)按下事件
? ? ? ? ? ? ? ? resize[i].onmousedown = function (e) {
? ? ? ? ? ? ? ? ? ? //顏色改變提醒
? ? ? ? ? ? ? ? ? ? resize[i].style.background = '#818181'
? ? ? ? ? ? ? ? ? ? var startX = e.clientX
? ? ? ? ? ? ? ? ? ? resize[i].left = resize[i].offsetLeft
? ? ? ? ? ? ? ? ? ? // 鼠標(biāo)拖動(dòng)事件
? ? ? ? ? ? ? ? ? ? document.onmousemove = function (e) {
? ? ? ? ? ? ? ? ? ? ? ? console.log('鼠標(biāo)按下')
? ? ? ? ? ? ? ? ? ? ? ? var endX = e.clientX
? ? ? ? ? ? ? ? ? ? ? ? var moveLen = resize[i].left + (endX - startX - 270) // （endx-startx）=移動(dòng)的距離。resize[i].left+移動(dòng)的距離=左邊區(qū)域最后的寬度
? ? ? ? ? ? ? ? ? ? ? ? var maxT = box[i].clientWidth - resize[i].offsetWidth - 270// 容器寬度 - 左邊區(qū)域的寬度 = 右邊區(qū)域的寬度
? ? ? ? ? ? ? ? ? ? ? ? console.log(moveLen,maxT)
? ? ? ? ? ? ? ? ? ? ? ? if (moveLen < 32) moveLen = 270 // 左邊區(qū)域的最小寬度為32px
? ? ? ? ? ? ? ? ? ? ? ? if (moveLen > maxT - 150) moveLen = maxT - 650 //右邊區(qū)域最小寬度為150px
? ? ? ? ? ? ? ? ? ? ? ? resize[i].style.left = moveLen // 設(shè)置左側(cè)區(qū)域的寬度
? ? ? ? ? ? ? ? ? ? ? ? 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'
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? // 鼠標(biāo)松開(kāi)事件
? ? ? ? ? ? ? ? ? ? document.onmouseup = function (evt) {
? ? ? ? ? ? ? ? ? ? ? ? console.log('鼠標(biāo)收起')
? ? ? ? ? ? ? ? ? ? ? ? //顏色恢復(fù)
? ? ? ? ? ? ? ? ? ? ? ? resize[i].style.background = '#d6d6d6'
? ? ? ? ? ? ? ? ? ? ? ? document.onmousemove = null
? ? ? ? ? ? ? ? ? ? ? ? document.onmouseup = null
? ? ? ? ? ? ? ? ? ? ? ? resize[i].releaseCapture && resize[i].releaseCapture() //當(dāng)你不在需要繼續(xù)獲得鼠標(biāo)消息就要應(yīng)該調(diào)用ReleaseCapture()釋放掉
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? resize[i].setCapture && resize[i].setCapture() //該函數(shù)在屬于當(dāng)前線程的指定窗口里設(shè)置鼠標(biāo)捕獲
? ? ? ? ? ? ? ? ? ? return false
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },mounted里面調(diào)用：
mounted() {
? ? ? ? ?this.dragControllerDiv()
? ? },以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Element-ui NavMenu子菜單使用遞歸生成時(shí)使用報(bào)錯(cuò)
這篇文章主要介紹了詳解Element-ui NavMenu子菜單使用遞歸生成時(shí)使用報(bào)錯(cuò)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作
這篇文章主要介紹了如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
本文通過(guò)實(shí)例代碼給大家介紹了vue仿百度搜索功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-02-02
vue封裝el-upload批量上傳只請(qǐng)求一次接口
本文主要介紹了vue封裝el-upload批量上傳只請(qǐng)求一次接口，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue輪播圖插件vue-awesome-swiper，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了Vue之Mixins(混入)的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue 點(diǎn)擊其他區(qū)域關(guān)閉自定義div操作
這篇文章主要介紹了vue 點(diǎn)擊其他區(qū)域關(guān)閉自定義div操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
element-ui多文件上傳的實(shí)現(xiàn)示例
這篇文章主要介紹了element-ui多文件上傳的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家分享了一個(gè)非常實(shí)用的vue導(dǎo)航鉤子，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了使用vue-upload上傳圖片的詳細(xì)使用說(shuō)明，文中有相關(guān)的代碼示例供大家參考，感興趣的小伙伴一起跟著小編來(lái)學(xué)習(xí)吧2023-05-05