本文实例为大家分享了Vue实现拖拽式分割布局的具体代码,供大家参考,具体内容如下
示例展示
代码
特地写了一个demo代码,可以直接复制下来运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>Document</title> </head> <body> <div id="app"> <div class='container' id='container'> <div id='top' class='top'>top</div> <div id='bar' class='bar'></div> <div id='bottom' class='bottom'>bottom</div> </div> </div> <script> var app = new Vue({ el: '#app', data: { }, mounted(){ this.dragChangeHeight('bar','top') }, methods:{ dragChangeHeight(drag, panel) { var dragEl = document.getElementById(drag) var panelEl = document.getElementById(panel) dragEl.onmousedown = function(ev) { var disH = panelEl.offsetHeight var disY = ev.clientY var disT = panelEl.offsetTop var b = '' document.onmousemove = function(ev) { panelEl.style.height = disH + (ev.clientY - disY) + 'px' // panelEl.style.top = disL - (ev.clientY - disY) + 'px' } document.onmouseup = function() { document.onmousemove = document.onmouseup = null } return false } }, dragChangeWidth(drag, panel) { var dragEl = document.getElementById(drag) var panelEl = document.getElementById(panel) dragEl.onmousedown = function(ev) { var disW = panelEl.offsetWidth var disX = ev.clientX var disL = panelEl.offsetLeft var b = '' document.onmousemove = function(ev) { panelEl.style.width = disW + (ev.clientX - disX) + 'px' // panelEl.style.left = disL - (ev.clientX - disX) + 'px' } document.onmouseup = function() { document.onmousemove = document.onmouseup = null } return false } }, } }) </script> <style> body{ margin: 0; } .container{ /* padding: 20px; */ height: 90vh; width: 90vw; display: flex; flex-direction: column; } .top{ width: 100%; height: 300px; background-color: blue; } .bar{ width: 100%; height: 10px; cursor: n-resize; background-color: black; } .bottom{ width: 100%; flex: auto; background-color: red; } </style> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。