使用到的技术：

vue3、pinia、view-ui-plus

实现的功能：

传入一个菜单数组数据，自动生成一个左侧菜单栏。菜单栏可以添加、删除、展开、重命名，拖动插入位置等。

效果预览：

 

代码：

c-menu-wrap.vue

<template>
	<div class="main-container">
		<div class="nav-top">
			<Tooltip content="展开全部" placement="top">
				<Icon type="ios-code" @click="expandAll"/>
			</Tooltip>

			<Tooltip content="创建文档" placement="top">
				<Icon type="ios-add" @click.stop="showPopper({e: $event, item: null})"/>
			</Tooltip>
		</div>

		<div class="nav-list">
			<cMenu 
				:list="menuList"
			/>
		</div>

		<div 
			@click.stop="hidePopper"
			class="menu-modal"
			ref="modal"
			v-show="isShowPopper"
			:style="{
				left: modalX+'px',
				top: modalY+'px'
			}">
			<ul>
				<li v-if="!editItem" @click.stop="createNew(1)">
					<Icon type="ios-add" />
					<span>新建文件夹</span>
				</li>
				<li v-if="editItem && editItem.type === 'folder'" @click.stop="createNew(1)">
					<Icon type="ios-add" />
					<span>新建子文件夹</span>
				</li>
				<li v-if="!editItem || (editItem && editItem.type === 'folder')" @click.stop="createNew(2)">
					<Icon type="ios-add" />
					<span>新建文档</span>
				</li>
				<!-- <li v-if="editItem">
					<Icon type="ios-add" />
					<span>上方新建模块</span>
				</li>
				<li v-if="editItem">
					<Icon type="ios-add" />
					<span>下方新建模块</span>
				</li> -->
				<li @click.stop="openRename" v-if="editItem">
					<Icon type="ios-create-outline" />
					<span>重命名</span>
				</li>
				<li @click.stop="delDoc" v-if="editItem">
					<Icon type="ios-trash-outline" />
					<span>删除</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { storeToRefs } from 'pinia'
	import { useMenuStore } from '@/stores/menu'

	import { defineProps, defineEmits, withDefaults, ref, nextTick, onMounted, onBeforeUnmount, provide } from 'vue'
	import { Modal, Message } from 'view-ui-plus'
	import cMenu from './c-menu.vue'

	const menuStore = useMenuStore()
	const { 
		modal,
		modalX,
		modalY,
		menuList, 
		isShowPopper, 
		editItem 
	} = storeToRefs(menuStore)
	const { 
		expandAll, 
		showPopper, 
		hidePopper, 
		createNew, 
		openRename
	} = menuStore

	const emit = defineEmits(['doAction'])


	onMounted(() => {
		// document.addEventListener('click', hidePopper)
	})

	onBeforeUnmount(() => {
		// document.removeEventListener('click', hidePopper)
	})

	// 删除文档
	function delDoc() {
		Modal.confirm({
			title: '提示',
			content: '确定要删除该文档吗？',
			onOk: () => {

				
			},
			onCancel: () => {
				Message.info('取消操作～');
			}
		});
	}

</script>

<style lang="scss" scoped&