vue實現(xiàn)多欄布局拖拽
本文實例為大家分享了vue實現(xiàn)多欄布局拖拽的具體代碼,供大家參考,具體內(nèi)容如下
一、目標(biāo)
vue 實現(xiàn)多個盒子(用戶根據(jù)實際場景決定盒子數(shù)量)自由拖拽,改變寬度。
二、應(yīng)用場景
可自由拖動寬度的多欄布局。
最典型的案例:編輯器(eg:vscode,idea等)
三、組件設(shè)計
由于該組件盒子數(shù)量不確定,所以我們設(shè)計組件時參考了Vuetify中的Form和FormItem的設(shè)計。即:外層大盒子處理分發(fā)的拖拽事件,里層的盒子負(fù)責(zé)展示各個Item的內(nèi)容。
組件設(shè)計實現(xiàn)目標(biāo):
<drag-box style="width: 100%; height: 100%;"> <drag-item>item1</drag-item> <drag-item>item2</drag-item> <drag-item>item3</drag-item> <drag-item>item4</drag-item> </drag-box>
四、實現(xiàn)
4.1 dragBox 靜態(tài)頁面
(通過插槽實現(xiàn)子元素的嵌套)
<template> <div ref='dragBox' style='display: flex; width: 100%; height: 100%;'> <slot></slot> </div> </template>
4.2 dragItem 頁面
(通過插槽實現(xiàn)drag-item內(nèi)部元素的嵌套)
<template> <div ref="container" class="d-flex" style="min-width: 200px; position: relative;"> <div style="width: 100%; height: 100%;"> <slot>默認(rèn)信息</slot> </div> <!-- 拖拽條 --> <div v-if="resizeShow" class="resize" /> </div> </template> <script> export default { props: { // 控制拖拽條的是否顯示,默認(rèn)顯示 resizeShow: { type: Boolean, default: true } } } </script> <style> .resize { position: absolute; top: 0; right: 0; width: 4px; height: 100%; cursor: col-resize; background-color: #d6d6d6; } </style>
4.3 拖拽邏輯
拖拽的邏輯應(yīng)當(dāng)交給dragBox處理,而非dragItem。
4.3.1 在實現(xiàn)拖拽之前,應(yīng)當(dāng)給子元素(即:dragItem)進(jìn)行合理布局。
當(dāng)用戶未給 dragItem 分配初始寬度時,則默認(rèn)flex:1(平均分配剩余空間)。具體邏輯如下:
// 如果dragItem 沒有定義寬度,則flex=1 setDragItemFlex () { const dragBox = this.$refs.dragBox const childsLen = dragBox.children.length for (let i = 0; i < childsLen; i++) { const node = dragBox.children[i] if (!node.style.width) { // 如果沒有定義寬度,則flex=1 node.style.flex = 1 } } },
4.3.2 拖拽實現(xiàn)邏輯
應(yīng)當(dāng)為每個dragItem的拖動條添加拖動事件。完整的拖動事件包括:鼠標(biāo)按下,鼠標(biāo)移動,鼠標(biāo)抬起(拖動結(jié)束)。
循環(huán)為每個拖動條添加事件:
dragControllerDiv () { const resize = document.getElementsByClassName('resize') // 拖拽條 // 循環(huán)為每個拖拽條添加事件 for (let i = 0; i < resize.length; i++) { // 鼠標(biāo)按下事件 resize[i].addEventListener('mousedown', this.onMouseDown) } },
鼠標(biāo)按下邏輯:獲取鼠標(biāo)按下的初始位置,改變拖拽條顏色,添加move和up的監(jiān)聽事件。
onMouseDown (e) { this.resizeBox = e.target this.currentBox = this.resizeBox.parentNode// 當(dāng)前盒子 this.rightBox = this.getNextElement(this.currentBox)// 當(dāng)前盒子的下個兄弟節(jié)點 if (!this.rightBox) return this.curLen = this.currentBox.clientWidth this.otherBoxWidth = this.$refs.dragBox.clientWidth - this.currentBox.clientWidth - this.rightBox.clientWidth // 其他盒子的寬度 // 顏色改變提醒 this.resizeBox.style.background = '#818181' this.startX = e.clientX document.addEventListener('mousemove', this.onMousemove) document.addEventListener('mouseup', this.onMouseup) }, // 獲取下一個兄弟元素的兼容函數(shù) getNextElement (element) { if (element.nextElementSibling) { return element.nextElementSibling } else { var next = element.nextSibling// 下一個兄弟節(jié)點 while (next && next.nodeType !== 1) { // 有 并且 不是我想要的 next = next.nextSibling } return next } }
鼠標(biāo)移動事件:計算并設(shè)置當(dāng)前盒子和右側(cè)盒子的寬度。
onMousemove (e) { const endX = e.clientX const moveLen = endX - this.startX // (endx-startx)= 移動的距離 const CurBoxLen = this.curLen + moveLen // resize[i].left+移動的距離=左邊區(qū)域最后的寬度 const rightBoxLen = this.$refs.dragBox.clientWidth - CurBoxLen - this.otherBoxWidth // 右側(cè)寬度=總寬度-左側(cè)寬度-其它盒子寬度 // 當(dāng)最小寬度時,無法繼續(xù)拖動 if (CurBoxLen <= 200 || rightBoxLen <= 200) return this.currentBox.style.width = CurBoxLen + 'px'// 當(dāng)前盒子的寬度 this.resizeBox.style.left = CurBoxLen // 設(shè)置左側(cè)區(qū)域的寬度 this.rightBox.style.width = rightBoxLen + 'px' },
鼠標(biāo)抬起事件:銷毀mousedown和mousemove事件;恢復(fù)拖拽條的顏色。
onMouseup () { // 顏色恢復(fù) this.resizeBox.style.background = '#d6d6d6' document.removeEventListener('mousedown', this.onMouseDown) document.removeEventListener('mousemove', this.onMousemove) },
在mounted鉤子函數(shù)里添加對應(yīng)的事件。
mounted () { this.setDragItemFlex() this.dragControllerDiv() },
引入并注冊使用該組件:
<template> <div id="app" style="width: 100%; height: 100vh; border:1px solid #ccc;"> <drag-box style="width: 100%; height: 100%;"> <drag-item style="width: 20%;">item1</drag-item> <drag-item>item2</drag-item> <drag-item style="width: 20%;" :resizeShow='false'>item3</drag-item> </drag-box> </div> </template> <script> import {DragBox, DragItem} from './components/dragLayouter' export default { name: 'App', components: { DragBox, DragItem } } </script>
五、運(yùn)行結(jié)果
具體樣式可后期修改。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue父列表數(shù)據(jù)獲取子列表數(shù)據(jù)的實現(xiàn)步驟
本文檔將介紹如何通過點擊父列表(表格)中的數(shù)據(jù)行來獲取到子列表(表格)的數(shù)據(jù),代碼示例是基于Vue框架實現(xiàn)的一個組件,包含了父列表和子列表,通過點擊父列表的數(shù)據(jù)行來動態(tài)獲取子列表的數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-06-06vue?webpack打包原理解析(全網(wǎng)最新最全)
webpack是讓我們可以進(jìn)行模塊化開發(fā),并且會幫助我們處理模塊間的依賴關(guān)系,這篇文章主要介紹了vue?webpack打包原理,本篇介紹的有點長,希望大家耐心閱讀2023-02-02vue-cli與webpack處理靜態(tài)資源的方法及webpack打包的坑
這篇文章主要介紹了vue-cli與webpack處理靜態(tài)資源的方法,需要的朋友可以參考下2018-05-05ant design的table組件實現(xiàn)全選功能以及自定義分頁
這篇文章主要介紹了ant design的table組件實現(xiàn)全選功能以及自定義分頁,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11