这篇文章主要为大家详细介绍了Vue实现拖拽式分割布局，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文分享Vue实现拖拽拆分布局的具体代码，供大家参考。具体内容如下

示例展示

代码

专门写了一个演示代码，可以直接复制运行。

lt;!DOCTYPE htmlgt;lt;html lang="en"gt;lt;headgt;? ? lt;meta charset="UTF-8"gt;? ? lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;? ? lt;script src="https://CDN.jsdelivr.net/npm/vue/dist/vue.js"gt;lt;/scriptgt;? ? lt;titlegt;Documentlt;/titlegt;lt;/headgt;lt;bodygt;lt;div id="app"gt;? lt;div class='container' id='container'gt;? ? lt;div id='top' class='top'gt;toplt;/divgt;? ? lt;div id='bar' class='bar'gt;lt;/divgt;? ? lt;div id='bottom' class='bottom'gt;bottomlt;/divgt;? lt;/divgt;lt;/divgt;lt;scriptgt;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? ? ? ? }? ? ? },? ? }})lt;/scriptgt;lt;stylegt;? 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;? }lt;/stylegt;lt;/bodygt;lt;/htmlgt;

这就是本文的全部内容。希望对大家的学习有帮助