如何使用Vue3+elementPlus的Tree組件實(shí)現(xiàn)一個(gè)拖拽文件夾管理
最近在做一個(gè)文件夾管理的功能，要實(shí)現(xiàn)一個(gè)樹(shù)狀的拖拽文件夾面板。里面包含兩種元素，文件夾以及文件
1、前言
最近在做一個(gè)文件夾管理的功能，要實(shí)現(xiàn)一個(gè)樹(shù)狀的文件夾面板。里面包含兩種元素，文件夾以及文件。交互要求如下：
創(chuàng)建、刪除，重命名文件夾和文件可以拖拽，拖拽文件到文件夾中，或著拖拽文件夾到文件夾中文件夾可展開(kāi)，顯示里面全部文件拖拽的時(shí)候要有輔助線顯示
2、分析
根據(jù)這個(gè)要求，我先找到了vue.draggable.next這個(gè)庫(kù)，結(jié)合elementPlus的Collapse折疊面板，以及Vue 3的遞歸組件封裝了一個(gè)組件 drag-folder ，結(jié)果測(cè)試發(fā)現(xiàn)，這個(gè)庫(kù)太久沒(méi)維護(hù)了，很多事件不支持，導(dǎo)致功能很難實(shí)現(xiàn)。比如，拖動(dòng)的時(shí)候拿不到拖動(dòng)對(duì)象所選中的目標(biāo)、沒(méi)有輔助線、Collapse折疊面板關(guān)閉后無(wú)法拖入等問(wèn)題。
就在頭疼之時(shí)，我不小心看到了elementPlus的Tree組件，發(fā)現(xiàn)它也支持拖拽，而且有輔助線，有豐富的回調(diào)事件，于是，我準(zhǔn)備魔改一下。
3、 實(shí)現(xiàn)
Tree組件只需要準(zhǔn)備一個(gè)樹(shù)狀數(shù)據(jù)，然后根據(jù)數(shù)據(jù)渲染出Tree組件即可，可以自定義子節(jié)點(diǎn)的鍵名，也可以使用插槽自定義內(nèi)容，于是一番操作后，我完成了第二版的 drag-folder 組件：
<template>
<div class="drag_folder_box">
<el-tree
draggable
node-key="uid"
:default-expanded-keys="defaultExpanded"
:data="interiorList"
:allow-drop="handleDragBehavior"
:allow-drag="handleAllowDrag"
@node-drag-start="handleDragStart"
@node-drag-enter="handleDragEnter"
@node-drag-leave="handleDragLeave"
@node-drag-over="handleDragOver"
@node-drag-end="handleDragEnd"
@node-drop="handleDrop"
@node-click="handleSwitchBillboard"
>
<template #default="{ data }">
<div class="tree_item">
<div class="item_title">{{ data.label }}</div>
<div class="item_operate">
<div class="operate_item" title="編輯" @click.stop="editBillboard(data)">
<el-icon :size="16">
<ele-Edit />
</el-icon>
</div>
<div class="operate_item" title="刪除" @click.stop="deleteBillboard(data)">
<el-icon :size="16">
<ele-Delete />
</el-icon>
</div>
</div>
</div>
</template>
</el-tree>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import type Node from 'element-plus/es/components/tree/src/model/node'
import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
import type { AllowDropType, NodeDropType } from 'element-plus/es/components/tree/src/tree.type'
import type { IGetBillboardListTreeItem } from '@/types/data-billboard'
// #region 組件邏輯
interface IProps {
list?: Array<IGetBillboardListTreeItem>
}
const props = withDefaults(defineProps<IProps>(), {
list: () => []
})
const emit = defineEmits(['edit', 'delete', 'switch', 'change'])
const interiorList = ref<Array<IGetBillboardListTreeItem>>([])
// #endregion
// #region 拖拽邏輯
watch(
() => props.list,
(newValue) => {
interiorList.value = newValue
},
{
deep: true,
immediate: true
}
)
// 節(jié)點(diǎn)開(kāi)始拖拽時(shí)
const handleDragStart = (node: Node, ev: DragEvents) => {}
// 拖拽進(jìn)入其他節(jié)點(diǎn)時(shí)
const handleDragEnter = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {}
// 拖拽離開(kāi)某個(gè)節(jié)點(diǎn)時(shí)
const handleDragLeave = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {}
// 在拖拽節(jié)點(diǎn)時(shí)
const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {}
// 拖拽結(jié)束時(shí)
const handleDragEnd = (draggingNode: Node, dropNode: Node, dropType: NodeDropType, ev: DragEvents) => {}
// 拖拽成功時(shí)
const handleDrop = (draggingNode: Node, dropNode: Node, dropType: NodeDropType, ev: DragEvents) => {
emit('change', interiorList.value)
}
// 是否允許拖拽
const handleAllowDrag = (draggingNode: Node) => {
return true
}
// 拖拽行為判斷
const handleDragBehavior = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
// 如果選中的節(jié)點(diǎn)不是看板 則不允許拖動(dòng)到內(nèi)部，只能是 'prev' 或 'next'
if (dropNode.data.type === 'billboard') {
return type !== 'inner'
}
return true
}
// 編輯看板/文件夾
const editBillboard = (data: IGetBillboardListTreeItem) => {
emit('edit', data)
}
// 刪除看板/文件夾
const deleteBillboard = (data: IGetBillboardListTreeItem) => {
emit('delete', data)
}
// 選擇看板
const handleSwitchBillboard = (data: IGetBillboardListTreeItem) => {
if (data.type === 'dir') return
if (data.id === props.billboardId) return
emit('switch', data)
}
// #endregion
// #region 生命周期
onMounted(() => {
interiorList.value = props?.list || []
})
// #endregion
</script>這個(gè)組件，使用起來(lái)很簡(jiǎn)單，只需要引入組件，然后綁定list就行了，下面我講一下這里面的一些坑。
4、踩坑
這里面有幾個(gè)坑，但是基本都解決了。
4.1、拖拽輔助線的坑
Tree組件沒(méi)有itemSize屬性，它的輔助線，默認(rèn)是26px，而我的每一項(xiàng)，是36px的高度，所以就會(huì)導(dǎo)致輔助線不能對(duì)準(zhǔn)。
最開(kāi)始我想著修改樣式，給height和line-height，發(fā)現(xiàn)不起作用。于是我去翻源碼，發(fā)現(xiàn)源碼：node_modules\element-plus\lib\components\tree\src\model\useDragNode.js里，treeNodeDragOver方法是給輔助線設(shè)置top的，這個(gè)top是根據(jù)前面的iconPosition的高度來(lái)的，所以我設(shè)置了icon的height和line-height，一頓操縱如下：
.el-tree-node__expand-icon {
line-height: 36px !important;
height: 36px !important;
padding: 0px 2px !important;
}改完發(fā)現(xiàn)，面板折疊起來(lái)是正常的，但是打開(kāi)后就還是不正常，審查元素發(fā)現(xiàn)，這個(gè)icon會(huì)旋轉(zhuǎn)，打開(kāi)面板后會(huì)添加一個(gè)expanded的類(lèi)名，該類(lèi)名添加了transform: rotate(90deg)的屬性，導(dǎo)致高度不對(duì)了，于是我又一頓操作：
.el-tree-node__expand-icon {
line-height: 36px !important;
height: 36px !important;
padding: 0px 2px !important;
}
.el-tree-node__expand-icon.expanded {
transform: rotate(0deg);
& svg {
transform: rotate(90deg);
}
}4.2、數(shù)據(jù)的坑
這個(gè)是我們后端設(shè)計(jì)的鍋。文件夾和文件的ID，會(huì)出現(xiàn)一樣的，沒(méi)有唯一ID，沒(méi)辦法，誰(shuí)讓我們前端就是這么善解人意，寫(xiě)個(gè)遞歸函數(shù)，拼接一個(gè)唯一ID出來(lái)咯。
const formatBillboardList = (list: Array<IBillboardTreeItem>, pid: number): Array<IBillboardTreeItem> => {
return list.map((item, index) => {
// 唯一ID
const uid = `${item.type}_${item.id}`
// 父ID
const parentId = pid === 0 ? item.id : pid
// 子層
const children = Array.isArray(item.children) ? formatBillboardList(item.children, item.id) : []
return {
...item,
uid,
order: index,
parentId,
children
}
})
}
const list = formatBillboardList(res.data, 0)4.3、限制拖拽
文件夾和文件，都是可以拖拽的，但是文件可以拖拽到文件夾上，文件夾不能拖拽到文件里。這里我們用到了Tree組件的allow-drop處理函數(shù)，它又三個(gè)參數(shù)，分別是拖拽對(duì)象，目標(biāo)對(duì)象，拖拽類(lèi)型。
const handleDragBehavior = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
// 如果選中的節(jié)點(diǎn)不是看板 則不允許拖動(dòng)到內(nèi)部，只能是 'prev' 或 'next'
if (dropNode.data.type === 'billboard') {
return type !== 'inner'
}
return true
}4.4、樣式調(diào)整
文件夾和文件的樣式不一樣，要區(qū)分，這里我們用Tree組件的props屬性，定制class實(shí)現(xiàn)
const treeOption = {
class: (data: IGetBillboardListTreeItem, node: Node) => {
if (data.id === props.billboardId && data.type === 'billboard') {
return 'on_tree_item'
} else if (data.type === 'dir') {
return 'folder'
} else {
return 'billboard'
}
}
}每一層，要有不同的縮進(jìn)，比如第一層縮進(jìn)10，第二層20，以此類(lèi)推，這里我們用Tree組件的indent屬性實(shí)現(xiàn)，直接綁定即可。
<el-tree :indent="10"></el-tree>
修改hover和focus時(shí)候的背景色
.drag_folder_box {
&:deep(.el-tree-node__content) {
width: 100%;
height: auto;
border-bottom: 1px solid #c1c1c1;
&:hover {
background-color: #e4f2ff !important;
}
&:focus {
background-color: #e4f2ff !important;
}
}
}如上，基本的樣式和功能就全部完成了。
到此這篇關(guān)于使用Vue3+elementPlus的Tree組件實(shí)現(xiàn)一個(gè)拖拽文件夾管理的文章就介紹到這了,更多相關(guān)Vue3 elementPlus拖拽文件夾內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue,uniapp--js禁止頁(yè)面滾動(dòng),取消滾動(dòng)方式
這篇文章主要介紹了vue,uniapp--js禁止頁(yè)面滾動(dòng),取消滾動(dòng)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹的是vue 如何實(shí)現(xiàn)表單校驗(yàn)的方法，又代碼詳細(xì)解說(shuō)，感興趣的小伙伴可以參考下面文章的具體內(nèi)容2021-09-09
本篇文章主要介紹了vue過(guò)濾器在v2.0版本用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
今天小編就為大家分享一篇vue 更改連接后臺(tái)的api示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue Element前端應(yīng)用開(kāi)發(fā)之Vuex中的API Store View的使用
這篇文章主要介紹了Vue Element前端應(yīng)用開(kāi)發(fā)之Vuex中的API Store View的使用，對(duì)Vue感興趣的同學(xué)，可以參考下2021-05-05
今天學(xué)習(xí) /deep/ 樣式穿透，因?yàn)関ue3中已經(jīng)使用:deep()取代了/deep/ ，所以直接用:deep()練習(xí)，這篇文章主要介紹了Vue3中樣式滲透:deep()為什么無(wú)效,需要的朋友可以參考下2022-11-11
解決vue bus.$emit觸發(fā)第一次$on監(jiān)聽(tīng)不到問(wèn)題
這篇文章主要介紹了解決vue bus.$emit觸發(fā)第一次$on監(jiān)聽(tīng)不到問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了vue-cli 3.0 使用全過(guò)程，本文通過(guò)項(xiàng)目實(shí)例相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-06-06
vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復(fù)制文件的方法
今天就好好說(shuō)說(shuō)vue-cli5.0種使用copy-webpack-plugin插件該如何配置的問(wèn)題。這里我們安裝的 copy-webpack-plugin 的版本是 ^11.0.0，感興趣的朋友一起看看吧2022-06-06
Vuejs第六篇之Vuejs與form元素實(shí)例解析
本文通過(guò)實(shí)例給大家詳細(xì)介紹了Vuejs與form元素的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09