成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue實(shí)現(xiàn)伸縮菜單功能

3403771864 / 802人閱讀

　　效果展示：

　　點(diǎn)擊即可隨意調(diào)節(jié)菜單寬度

　　變動(dòng)后

　　頁(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)容，請(qǐng)大家多多關(guān)注。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/127673.html

相關(guān)文章

  • 餓了么組件庫(kù)，element-ui開(kāi)發(fā)精美的后臺(tái)管理系統(tǒng)系列之（一）開(kāi)發(fā)伸縮菜單

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

    whlong 評(píng)論0 收藏0

  • Vue.js-Vue實(shí)例

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

    shinezejian 評(píng)論0 收藏0

  • Jq-簡(jiǎn)單伸縮菜單

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

    番茄西紅柿 評(píng)論0 收藏2637

  • vue輕量級(jí)后臺(tái)管理系統(tǒng)基礎(chǔ)模板

    摘要：具體實(shí)現(xiàn)請(qǐng)查看和的退出登陸回調(diào)方法?，F(xiàn)在除了必要的頁(yè)面需要在一開(kāi)始添加到路由表里，其他的頁(yè)面都可以根據(jù)后臺(tái)數(shù)據(jù)來(lái)自動(dòng)生成。另外，如果在未登陸時(shí)要訪問(wèn)某一指定頁(yè)面，會(huì)重定向到登陸頁(yè)，登陸成功后會(huì)自動(dòng)跳到這個(gè)指定頁(yè)面。 項(xiàng)目地址 vue-admin-template 在線預(yù)覽 更新 2019.6.25 更新 修復(fù)路由表沖突問(wèn)題 退出當(dāng)前用戶，換賬號(hào)重新登陸時(shí)，上個(gè)賬號(hào)和現(xiàn)在的賬號(hào)路由表會(huì)有...

    2shou 評(píng)論0 收藏0

  • 管理系統(tǒng)之權(quán)限的設(shè)計(jì)和實(shí)現(xiàn)

    摘要：基本設(shè)計(jì)和分析前端服務(wù)端主要功能打開(kāi)思否頁(yè)面，根據(jù)頁(yè)面的功能點(diǎn)，設(shè)計(jì)出相關(guān)的數(shù)據(jù)表，和管理系統(tǒng)需要的相關(guān)頁(yè)面。 本文主要想對(duì)前端權(quán)限管理功能實(shí)現(xiàn)做一個(gè)分享，所以并不會(huì)對(duì)后臺(tái)管理的框架結(jié)構(gòu)做太詳細(xì)介紹，如果有朋友對(duì)其他有興趣可以留言。 基本設(shè)計(jì)和分析 前端 vue + elementui 服務(wù)端: node + mysql + nginx 主要功能 打開(kāi)思否頁(yè)面，根據(jù)頁(yè)面的功能點(diǎn)，設(shè)...

    googollee 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<