Vue和Element UI 路由跳转，侧边导航的路由跳转，侧边栏拖拽

首先看布局，因为我的用于页面显示的 <router-view> 是通过重定向定位到登陆页的，然后通过登陆页跳转到主页。项目中用到了点击侧边栏的跳转，所以记录下来，方便有需要的人用到~

1. 阐述
   （1）.content{ display:flex;} 一定要有，否则在拖拽时会出现换行的情况
   （2）resize 要相对于父级绝对定位

<template>
	<!--	<div class="el-dialog__header">-->

	<!--	</div>-->
	<div >
		<!--搜索框-->
		<div class="top-wrapper ">
			<div class="search el-input el-input--suffix">
				<input
					type="text"
					autocomplete="off"
					placeholder="输入指标名称搜索"
					class="el-input__inner"
				/>
			</div>
		</div>
		<!--中部-->
		<div class="indicator-wrapper">
			<!--侧边栏   -->
			<div class="indicator-side">
				<a
					:class="{ 'indicator-category': true, 'indicator-category-active': item.checked }"
					v-for="item in sideList"
					:key="item.id"
					@click.prevent="categoryClick(item)"
					href="#!"
				>
					{{ item.name }}
				</a>
			</div>
			<!--中间选择器   -->
			<div class="indicator-body">
				<div class="indicator-block"
					 v-for="item in sideList"
					 :key="item.id" :id="'chen'+ item.id">
					<div class="indicator-group">
						<span class="indicator-title">{{ item.name }} </span>
					</div>
					<div class="el-row">
						<div class="el-col el-col-8" v-for="el in item.child " :key="el.id">
							<el-checkbox v-model="el.checked" class="el-checkbox__input el-checkbox"
							><span class="el-checkbox__label">{{ el.name }}</span></el-checkbox>
						</div>
					</div>
				</div>
			</div>
			<!--拖拽-->
			<div class="flex ">
				<div class="indicator-drag">
					<div class="indicator-content">
						<div class="drag-title">已选指标</div>
						<div class="drag-sec">拖动可自定义指标顺序</div>
						<div class="indicator-limit_low">
							<div class="drag-block not-allow mg2">账户名称</div>
						</div>
						<div class="drag-sepreate">以上指标将横向固定</div>
					</div>
					<div class="indicator-limit-many" style="max-height: 445px">
						<section
							v-draggable="[
							drag,
							{
								animation: 150,
								ghostClass: 'ghost',
								group: 'people',
								onUpdate,
								onAdd,
								onRemove
							}
						]"
							class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
						>
							<div
								v-for="item in drag"
								:key="item.id"
								class="drag-block hover-class all-scroll mg2"
								@click="dragClick(item)"
							>
								{{ item.name
								}}
								<el-icon
									@click="removeItem(item.id)"
									style="
									float: right;
									align-items: center;
									position: relative;
									top: 8px;
								"
									class="mg-icon-close close"
								>
									<close
									/>
								</el-icon>
							</div>
						</section>
						<div class="flex justify-between">
							<preview-list :list="drag" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { vDraggable } from "vue-draggable-plus";
import { Close } from "@element-plus/icons-vue";

const sideList = ref([
	{
		id: 1,
		name: "基本信息",
		child: [
			{
				id: 1,
				name: "账号名称"
			},
			{
				id: 2,
				name: "账户ID"
			},
			{
				id: 3,
				name: "账户主体"
			}
		]
	},
	{
		id: 2,
		name: "财务流水",
		child: [
			{
				id: 1,
				name: "共享赠款支出（￥）"
			},
			{
				id: 2,
				name: "账户总支出"
			},
			{
				id: 3,
				name: "账户现金支出"
			}
		]
	},
	{
		id: 3,
		name: "展现数据",
		child: [
			{
				id: 1,
				name: "消耗"
			},
			{
				id: 2,
				name: "展示数"
			},
			{
				id: 3,
				name: "平均千次展现费用"
			}
		]
	},
	{
		id: 4,
		name: "转化数据",
		child: [
			{
				id: 1,
				name: "转换数"
			},
			{
				id: 2,
				name: "转换陈本"
			},
			{
				id: 3,
				name: "转换率"
			}
		]
	},
	{
		id: 5,
		name: "转化数据(计费时间)",
		child: [
			{
				id: 1,
				name: "转化数（计费时间）"
			},
			{
				id: 2,
				name: "转化成本（计费时间）"
			},
			{
				id: 3,
				name: "深度转化次数（计费时间）"
			}
		]
	},
	{
		id: 6,
		name: " APP下载数据",
		child: [
			{
				id: 1,
				name: "安卓下载开始数"
			},
			{
				id: 2,
				name: "安卓下载开始成本"
			},
			{
				id: 3,
				name: "安卓下载开始率"
			}
		]
	},
	{
		id: 7,
		name: "视频数据",
		child: [
			{
				id: 1,
				name: "播放数"
			},
			{
				id: 2,
				name: "有效播放数"
			},
			{
				id: 3,
				name: "有效播放率"
			}
		]
	},
	{
		id: 8,
		name: "落地页及门店数据",
		child: [
			{
				id: 1,
				name: "点击电话按钮"
			},
			{
				id: 2,
				name: "表单提交"
			},
			{
				id: 3,
				name: "地图搜索"
			}
		]
	},
	{
		id: 9,
		name: "附加创意",
		child: [
			{
				id: 1,
				name: "附加创意电话按钮点击"
			},
			{
				id: 2,
				name: "附加创意在线咨询点击"
			},
			{
				id: 3,
				name: "附加创意表单按钮点击"
			}
		]
	},
	{
		id: 10,
		name: "互动数据",
		child: [
			{
				id: 1,
				name: "新增关注数"
			},
			{
				id: 2,
				name: "点赞数"
			},
			{
				id: 3,
				name: "评论提交数"
			}
		]
	},
	{
		id: 11,
		name: " 直播间数据",
		child: [
			{
				id: 1,
				name: "直播间观看数"
			},
			{
				id: 2,
				name: "直播间超过1分钟观看数"
			},
			{
				id: 3,
				name: "直播间关注数"
			}
		]
	},
	{
		id: 12,
		name: "游戏行业",
		child: [
			{
				id: 1,
				name: "当日付费金额"
			},
			{
				id: 2,
				name: "当日付费ROI"
			},
			{
				id: 3,
				name: "激活24h首次付费数"
			}
		]
	},
	{
		id: 13,
		name: "线索收集",
		child: [
			{
				id: 1,
				name: "有效获客"
			},
			{
				id: 2,
				name: "乘客首次下单数"
			},
			{
				id: 3,
				name: "回访---加好友（计费时间）"
			}
		]
	}
]);

const categoryClick = (item) => {
	sideList.value.forEach((el) => (el.checked = false));
	item.checked = !item.checked;
	const element = document.getElementById("chen" + item.id);
	if (element) {
		element.scrollIntoView({ behavior: "smooth" });
	}

};

const count = ref(0);

const removeItem = (id) => {
	drag.value = drag.value.filter(item => item.id != id);


};
// const domeRef = ref<HTMLElement | null>(null);
// const handleClick = (MouseEvent) => {
// 	e.preventDefault();
// };
//拖拽
const drag = ref([
	{
		id: 1,
		name: "账户ID"
	},
	{
		id: 2,
		name: "备注"
	},
	{
		id: 3,
		name: "项目"
	},
	{
		id: 4,
		name: "登录邮箱"
	},
	{
		id: 5,
		name: "账户余额(元)"
	},
	{
		id: 6,
		name: "消耗"
	},
	{
		id: 7,
		name: "点击率"
	},
	{
		id: 8,
		name: "深度转化成本"
	},
	{
		id: 9,
		name: "首次付费率"
	},
	{
		id: 10,
		name: "APP内访问"
	},
	{
		id: 11,
		name: "app内下单"
	}
]);
const dragClick = (item) => {
	drag.value.forEach((el) => (el.checked = false));
	item.checked = !item.checked;
};

function onUpdate() {
	console.log("update");
}

function onAdd() {
	console.log("add");
}

function onRemove() {
	console.log("remove");
}
</script>

<style scoped lang="scss">
::v-deep .el-scrollbar {
	overflow: hidden;
	height: 100%;
	position: static !important;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
	background-color:  #409eff;;
	//border-color: var(--el-checkbox-checked-input-border-color);
}
//隐藏滚动条
::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background-color: rgb(255, 255, 255, 0.2);;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
//搜索框
.top-wrapper {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 16px;
}

.top-wrapper .search {
	width: 250px;
}

.el-input {
	position: relative;
	font-size: 14px;
}

.el-input__inner {
	-webkit-appearance: none;
	background-color: #fff;
	background-image: none;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	box-sizing: border-box;
	color: #606266;
	display: inline-block;
	height: 40px;
	line-height: 40px;
	outline: 0;
	padding: 0 15px;
	transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	width: 100%;
	font-size: inherit;
	-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.el-dialog .el-dialog__body .el-input .el-input__inner {
	padding-left: 8px;
	color: #333;
}

.el-input .el-input__inner {
	height: 32px;
	line-height: 32px;
	border-radius: 2px;
}

//侧边栏
.indicator-side .indicator-category {
	padding-left: 16px;
	font-size: 14px;
	line-height: 40px;
	color: #333;
	cursor: pointer;
	display: block;
}

.indicator-side .indicator-category-active {
	color: #197afb;
	background-color: #d6eaff;
}

//中间基本信息
.indicator-block {
	padding: 16px 0 0 24px;
	border-bottom: 1px solid #eaebec;
}

.indicator-group {
	display: flex;
	justify-content: flex-start;
}

.indicator-title {
	margin-bottom: 16px;
	font-weight: 700;
	color: #333;
}

.el-checkbox__input.is-checked .el-checkbox__label{
	color: #409eff;
}

.el-checkbox__label {
	color: #333;
}

.el-checkbox__label,
.el-radio__label {
	font-size: 12px;
	color: #666;
}

.el-checkbox__label {
	display: inline-block;
	padding-left: 1px;
	line-height: 19px;
	font-size: 12px;
}

//拖拽
.indicator-drag .indicator-content {
	padding: 0 16px;
}

.indicator-drag .drag-title {
	font-size: 14px;
	font-weight: 700;
	line-height: 100%;
	color: #333;
}

.indicator-drag .drag-sec {
	margin: 8px 0;
	font-size: 12px;
	line-height: 100%;
	color: #999;
}
.indicator-drag .drag-sepreate {
	position: relative;
	margin: 16px 0 0;
	font-size: 12px;
	color: #999;
	text-align: center;
}

.indicator-drag .indicator-limit-many {
	max-height: 445px;
	padding: 0 16px;
	margin-top: 16px;
	overflow-x: hidden;
	overflow-y: auto;
}


.indicator-drag .mg2 {
	margin-bottom: 2px;
}

.indicator-drag .drag-block {
	position: relative;
	height: 40px;
	//width: 134px;
	padding: 0 30px 0 36px;
	overflow: hidden;
	line-height: 40px;
	text-overflow: ellipsis;
	white-space: nowrap;
	background-color: #fff;
	border-bottom: 1px solid #e8eaec;
}


.indicator-drag .drag-block .close {
	position: absolute;
	top: 13px;
	line-height: 100%;
	color: #cecece;
	cursor: pointer;
}

//滑动条
.infinite-list {
	width: 160px;
	height: 300px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.infinite-list .infinite-list-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding-left: 16px;
	font-size: 14px;
	background: #409eff;
	margin: 10px;
	color: #409eff;
}

.infinite-list .infinite-list-item + .list-item {
	margin-top: 10px;
}

//中部
.indicator-wrapper {
	display: flex;
	width: 832px;
	height: 516px;
	border: 1px solid #eaebec;
	border-radius: 4px;

}

//侧边栏
.indicator-side {
	flex-shrink: 0;
	width: 160px;
	overflow: auto;
	border-right: 1px solid #eaebec;
}

//选择器
.indicator-body {
	width: 672px;
	overflow: auto;
	scroll-behavior: smooth;
}

//右边
.indicator-drag {
	position: absolute;
	top: 0;
	right: 0;
	flex-shrink: 0;
	width: 216px;
	//height: 676px;
	padding: 25px 0;
	overflow: auto;
	background-color: #f8f8f9;
	border-right: 1px solid #eaebec;
}
</style>