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"><inputtype="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"><sectionv-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"><divv-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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/45677.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

26.7 Django单表操作

1. 模型管理器 1.1 Manager管理器 Django ORM中, 每个Django模型(Model)至少有一个管理器, 默认的管理器名称为objects. objects是一个非常重要的管理器(Manager)实例, 它提供了与数据库进行交互的接口.通过管理器, 可以执行数据库查询, 保存对象到数据库等操作.objects管理器…

【Unity学习笔记】第十九 · 物理引擎约束求解解惑(LCP,最优,拉格朗日乘数法,SI,PGS,基于冲量法)

转载请注明出处: https://blog.csdn.net/weixin_44013533/article/details/140309494 作者&#xff1a;CSDN|Ringleader| 在学习物理引擎过程中&#xff0c;有几大问题一直困扰着我&#xff1a; 约束求解到底是LCP还是带约束最优问题&#xff1f;约束求解过程中拉格朗日乘数法…

SpringBoot整合JWT示例教程

1. JWT简介 JSON Web Token (JWT) 是一种开放标准&#xff08;RFC 7519&#xff09;&#xff0c;它定义了一种紧凑且自包含的方式&#xff0c;用于在各方之间作为 JSON 对象安全地传输信息。由于这些信息是经过数字签名的&#xff0c;因此可以被验证和信任。JWT 通常用于身份验…

openharmony上传图片,并获取返回路径

适用条件&#xff1a; openharmony开发 4.0 release版本&#xff0c;对应能力API10 一直不断尝试&#xff0c;一会用官方提供的上传文件&#xff0c;一会用第三方库的axios都不行&#xff0c; 一会报错‘没权限&#xff0c;一会报错’路径错误&#xff0c;还有报错‘401参数错…

本地部署,去除动漫图像背景Anime Remove Background

目录 摘要 引言 深度学习在动漫角色中的应用 1.​U-Net 2.Mask R-CNN 3.ISNet 模型 4.MODNet 模型 5.InSPyReNet 模型 本地部署 运行效果 测验结果​ Tip&#xff1a; 摘要 动漫图像背景去除是一项在图像处理和计算机视觉领域具有重要应用的技术&#xff0c;广泛应用于…

奇舞周刊第533期:单点登录(SSO)实现详解

奇舞推荐 ■ ■ ■ 单点登录&#xff08;SSO&#xff09;实现详解&#xff01;&#xff01; 单点登录是什么&#xff1f;你是怎么理解的&#xff1f;单点登录是如何实现的。 纯前端怎么实现检测版本更新&#xff0c;请看这篇&#xff01; 在传统的多页Web应用中&#xff0c;每次…

CSS实现table表格:隔行换色的效果

表格是网页中十分重要的组成元素。表格用来存储数据&#xff0c;包含标题、表头、行和单元格。在HTML语言中&#xff0c;表格标记使用符号<table>表示。定义表格光使用<table>是不够的&#xff0c;还需要定义表格中的行、列、标题等内容。推荐博文&#xff1a;《HT…

Mac M1安装配置Hadoop+Flink SQL环境

Flink 1.18.1 Hadoop 3.4.0 一、准备工作 系统&#xff1a;Mac M1 (MacOS Sonoma 14.3.1) JDK&#xff1a;jdk1.8.0_381 &#xff08;注意&#xff1a;尽量一定要用JDK8&#xff0c;少用高版本&#xff09; Scala&#xff1a;2.12 JDK安装在本机的/opt/jdk1.8.0_381.jdk/C…

Uniapp鸿蒙项目实战

Uniapp鸿蒙项目实战 24.7.6 Dcloud发布了uniapp兼容鸿蒙的文档&#xff1a;Uniapp开发鸿蒙应用 在实际使用中发现一些问题&#xff0c;开贴记录一下 设备准备 windows电脑准备&#xff08;家庭版不行&#xff0c;教育版、企业版、专业版也可以&#xff0c;不像uniapp说的只有…

html5——CSS3_文本样式属性

目录 字体样式 字体类型 字体大小 字体风格 字体的粗细 文本样式 文本颜色 排版文本段落 文本修饰和垂直对齐 文本阴影 字体样式 字体类型 p{font-family:Verdana,"楷体";} body{font-family: Times,"Times New Roman", "楷体";} …

html5——CSS高级选择器

目录 属性选择器 E[att^"value"] E[att$"http"] E[att*"http"] 关系选择器 子代&#xff1a; 相邻兄弟&#xff1a; 普通兄弟&#xff1a; 结构伪类选择器 链接伪类选择器 伪元素选择器 CSS的继承与层叠 CSS的继承性 CSS的层叠性 …

华为HCIP Datacom H12-821 卷37

1.多选题 下面关于Network- Summary-LSA 描述正确的是 A、Network- Summary-LSA中的Metric被设置成从该ABR到达目的网段的开销值 B、Network- Sumary-LSA中的Net mask 被设置成目的网段的网络掩码 C、Network- Summary-LSA 是由ASBR产生的 D、Network- Summary-LSA 中的Li…

php安装Imagick扩展 处理pdf为图片

这个方法是使用源码编译安装&#xff0c;适用于php编译安装和包安装。如果有pecl&#xff0c;直接安装就行&#xff0c;我这是因为多个环境怕直接使用pecl工具导致混乱。 由于浏览器显示大量pdf不方便&#xff0c;我这先将pdf转化为图片再显示 如果没有安装php&#xff0c;这是…

网络层的角色与重要性:互联网通信的关键

本章讨论网络层及网络互连问题&#xff0c;也就是讨论多个网络通过路由器互连成为一个互连网络的各种问题。在介绍网络层提供的两种不同服务后&#xff0c;我们开始讲解本章的核心内容——网际协议&#xff08;IP&#xff09;&#xff0c;这是本书的一项重点内容。只有较深入地…

登录/注册

目录 1.HTML 2.CSS 3.JS 4.资源 5.运行结果 6.下载链接 7.注意事项 1.HTML <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-sca…

Zabbix配置JAVA JMX监控

JAVA JMX监控简介 官方文档&#xff1a;https://www.zabbix.com/documentation/current/zh/manual/concepts/java Zabbix Java gateway以 Zabbix 守护进程方式原生支持监控 JMX 应用程序。Zabbix Java gateway 的守护进程是用 Java 编写。为了在特定主机上找到 JMX 计数器的值…

Java设计模式的7个设计原则

Java设计模式的7个设计原则是面向对象设计领域中的重要指导方针&#xff0c;它们旨在提高软件系统的可维护性、可扩展性、可复用性和灵活性。以下是这7个设计原则的详细解释&#xff1a; 1. 开闭原则&#xff08;Open-Closed Principle, OCP&#xff09; 定义&#xff1a;一个…

LCM通讯的使用

本文主要介绍LCM通讯的基本使用&#xff0c;内容主要整理自官网 https://lcm-proj.github.io/lcm/index.html LCM&#xff0c;即Library for Communication and Marshalling&#xff0c;是一组用于消息传递与数据封装的库和工具&#xff0c;它主要的面向对象是要求高带宽、低延…

Cesium--获取当前相机中心与地面的射线焦点

本文记录获取当前相机中心与地面的射线焦点的方法&#xff0c;可用于视角缩放过程中&#xff0c;控制视角自动平滑切换到二维等场景&#xff1a; 方法一定是视角中心能与地面有交集&#xff0c;如果对着地平线或对着天空肯定是没效果的。直接放代码&#xff1a; //调整相机到正…

Objective-C 自定义渐变色Slider

文章目录 一、前情概要二、具体实现 一、前情概要 系统提供UISlider&#xff0c;但在开发过程中经常需要自定义&#xff0c;本次需求内容是实现一个拥有渐变色的滑动条&#xff0c;且渐变色随着手指touch的位置不同改变区域&#xff0c;类似如下 可以使用CAGradientLayer实现渐…