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