vue中的可拖拽寬度div的實現(xiàn)示例
更新時間:2022年04月08日 09:45:03 作者:李劍一
本文主要介紹了vue中的可拖拽寬度div的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
主要思路
- 在需要拖拽寬度的區(qū)域設置一個div,高度設為 100%,寬度盡量窄一些(也不要太窄,3~6px左右)
- 在此div上綁定當“鼠標按下”時,觸發(fā)document綁定“鼠標移動”方法和"鼠標抬起"方法
- 通過鼠標移動方法不斷獲取當前鼠標位置,設置需要變化大小div的寬高。
- 鼠標抬起時取消鼠標移動方法和鼠標抬起方法的綁定。
<template> ? <div class="container" id="content_box"> ? ? <div class="tab">左側(cè)Tab</div> ? ? <div class="menu" ref="menu"> ? ? ? 左側(cè)菜單 ? ? ? <div class="menu-resize" ref="menuResize"></div> ? ? </div> ? ? <div class="content"> ? ? ? 中心區(qū)域 ? ? ? <div class="opera" ref="opera"> ? ? ? ? <div class="opera-resize" ref="operaResize"></div> ? ? ? ? 操作區(qū)域 ? ? ? </div> ? ? </div> ? </div> </template> <script> export default { ? name: "dropWidth", ? mounted() { ? ? this.$nextTick(() => { ? ? ? this.dropSize(); ? ? }) ? }, ? methods: { ? ? dropSize() { ? ? ? let that = this, ? ? ? ? ? menuWidth = 200, ? ? ? ? ? operaHeight = 200; ? ? ? this.$refs.menuResize.onmousedown = function () { ? ? ? ? document.onmousemove = function (e) { ? ? ? ? ? let clientX = e.clientX; ? ? ? ? ? // 最大寬度 ? ? ? ? ? if(clientX>=330){ ? ? ? ? ? ? clientX = 330; ? ? ? ? ? } ? ? ? ? ? // 最小寬度 ? ? ? ? ? if(clientX<=230){ ? ? ? ? ? ? clientX = 230; ? ? ? ? ? } ? ? ? ? ? // TODO 這里減的是最左側(cè)tab的寬度 ? ? ? ? ? menuWidth = clientX - 30; ? ? ? ? ? that.$refs.menu.style.width = clientX - 30 +"px"; ? ? ? ? } ? ? ? ? document.onmouseup = function () { ? ? ? ? ? console.log('當前寬度', menuWidth); ? ? ? ? ? document.onmousemove = null; ? ? ? ? ? document.onmouseup = null; ? ? ? ? ? that.releaseCapture && that.releaseCapture() ? ? ? ? } ? ? ? } ? ? ? this.$refs.operaResize.onmousedown = function () { ? ? ? ? document.onmousemove = function (e) { ? ? ? ? ? let clientY = e.clientY; ? ? ? ? ? console.log(clientY) ? ? ? ? ? // 最大寬度 ? ? ? ? ? if(clientY<=100){ ? ? ? ? ? ? clientY = 100; ? ? ? ? ? } ? ? ? ? ? // 最小寬度 ? ? ? ? ? if(clientY>=300){ ? ? ? ? ? ? clientY = 300; ? ? ? ? ? } ? ? ? ? ? operaHeight = clientY; ? ? ? ? ? // TODO 這里需要取反向 ? ? ? ? ? that.$refs.opera.style.height = 400 - clientY +"px"; ? ? ? ? } ? ? ? ? document.onmouseup = function () { ? ? ? ? ? console.log('當前寬度', operaHeight); ? ? ? ? ? document.onmousemove = null; ? ? ? ? ? document.onmouseup = null; ? ? ? ? ? that.releaseCapture && that.releaseCapture() ? ? ? ? } ? ? ? } ? ? } ? } } </script> <style scoped> .container { ? width: 1000px; ? height: 400px; ? border: 2px solid #dddddd; ? display: flex; ? justify-content: center; } .tab { ? width: 30px; ? height: 100%; ? background-color: #EC8C32; ? flex-shrink: 0; ? flex-grow: 0; } .menu { ? width: 200px; ? background-color: #AAB6E0; ? flex-shrink: 0; ? flex-grow: 0; ? position: relative; } .content { ? width: 100%; ? position: relative; } .opera { ? width: 100%; ? height: 200px; ? position: absolute; ? bottom: 0; ? background-color: #F2BE25; } .menu-resize { ? width: 5px; ? height: 100%; ? position: absolute; ? top: 0; ? right: 0; ? cursor: col-resize; } .opera-resize { ? width: 100%; ? height: 5px; ? position: absolute; ? top: 0; ? left: 0; ? cursor: row-resize; } </style>
實現(xiàn)效果
到此這篇關(guān)于vue中的可拖拽寬度div的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)vue 可拖拽寬度div內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
客戶端(vue框架)與服務器(koa框架)通信及服務器跨域配置詳解
本篇文章主要介紹了客戶端(vue框架)與服務器(koa框架)通信及服務器跨域配置詳解,具有一定的參考價值,有興趣的可以了解一下2017-08-08多頁vue應用的單頁面打包方法(內(nèi)含打包模式的應用)
這篇文章主要介紹了多頁vue應用的單頁面打包方法(內(nèi)含打包模式的應用),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-06-06Nuxt3項目中問題匯總之刷新頁面useFetch無返回解決
Nuxt.js是一個基于 Vue.js 的服務端渲染應用框架,這篇文章主要給大家介紹了關(guān)于Nuxt3項目中問題匯總之刷新頁面useFetch無返回解決辦法的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03vue基于mint-ui的城市選擇3級聯(lián)動的示例
本篇文章主要介紹了vue基于mint-ui的城市選擇3級聯(lián)動的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10基于Vue3+Three.js實現(xiàn)一個3D模型可視化編輯系統(tǒng)
這篇文章主要介紹了基于Vue3+Three.js實現(xiàn)一個3D模型可視化編輯系統(tǒng),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09