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

news/2024/9/13 23:05:27/ 标签: vue.js, elementui, javascript

 首先看布局,因为我的用于页面显示的 <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.ppmy.cn/news/1475653.html

相关文章

Python 爬虫与 Java 爬虫:相似之处、不同之处和选项

在信息时代&#xff0c;网络上可用的数据量巨大且不断增长。为了从这些数据中提取有用的信息&#xff0c;爬虫已成为一种重要的技术。Python 和 Java 都是流行的编程语言&#xff0c;都具有强大的爬虫功能。本文将深入探讨 Python 爬虫和 Java 爬虫之间的差异&#xff0c;以帮助…

IP 协议的特性

IP 协议&#xff08;Internet Protocol&#xff09;作为互联网的核心协议之一&#xff0c;具有诸多关键特性&#xff0c;为网络通信的实现和发展奠定了坚实基础。 一、无连接性 IP 协议是一种无连接的协议。这意味着在发送数据之前&#xff0c;源节点和目的节点之间不需要建立…

Python爬虫教程第4篇-使用BeautifulSoup解析html

文章目录 Beautiful Soup简介安装Beautiful Soup快速开始如何使用Beautiful Soup中的对象TagNameAttributes多值属性 NavigableStringBeautifulSoupComment 遍历文档树子节点tag名字.contents 和 .children.descendants.strings 和 stripped_strings 父节点.parent.parents 兄弟…

充气膜游泳馆安全吗—轻空间

充气膜游泳馆&#xff0c;作为一种新型的游泳场馆&#xff0c;以其独特的结构和众多优点&#xff0c;逐渐受到各地体育设施建设者的青睐。然而&#xff0c;关于充气膜游泳馆的安全性&#xff0c;一些人仍然心存疑虑。那么&#xff0c;充气膜游泳馆到底安全吗&#xff1f;轻空间…

Qt Quick qml自定义控件:qml实现电池控件

qml入门进阶专栏地址:https://blog.csdn.net/yao_hou/category_9951228.html?spm=1001.2014.3001.5482 本篇博客介绍如何使用qml来实现电池控件,效果图如下: 下面给出实现代码 Battery.qml /*电池组件*/import QtQuick 2.15 import QtQuick.Controls 2.15Rectangle {id: b…

Linux 扩展硬盘容量

根分区的硬盘容量不够了需要添加容量 扩展硬盘容量前提是需要虚拟机关机才能进行以下操作 在虚拟中找到虚拟机设置 >> 点击硬盘 >> 选择扩展 >> 输入自已要扩展的大小 >> 确定 这些设置好之后&#xff0c;启动虚拟机 fdisk /dev/sda n p 三个回车…

基于前馈神经网络 FNN 实现股票单变量时间序列预测(PyTorch版)

前言 系列专栏:【深度学习:算法项目实战】✨︎ 涉及医疗健康、财经金融、商业零售、食品饮料、运动健身、交通运输、环境科学、社交媒体以及文本和图像处理等诸多领域,讨论了各种复杂的深度神经网络思想,如卷积神经网络、循环神经网络、生成对抗网络、门控循环单元、长短期记…

188家国产大模型:挑战与机遇,未来杀手级AI应用究竟该长什么样子?

未来的杀手级AI应用究竟该长什么样子&#xff1f;这篇文章里&#xff0c;作者梳理了国内外LLMs基础大模型的特征&#xff0c;并于最后发表了自己关于杀手级AI应用的看法和见解&#xff0c;一起来看一下。 摘要&#xff1a; 本文详细列表展示国外18家&#xff0c;国内188家大模…

【计算机毕业设计】021基于weixin小程序微信点餐

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

Vue3单文件jsx输出多组件示例遇到的坑

感谢博主减肥吧Evan提供的SFC实现多组件的思路和实现&#xff0c;小卷在大佬的基础上再完善下实现。 我们从tsx的API使用上得到启发&#xff0c;可以在vue的单文件组件&#xff08;sfc&#xff09;中使用defineComponent来定义和导出多个独立的小组件。此时sfc中的<templat…

解决vscode项目中无法识别宏定义的问题

在c_cpp_properties.json中的"defines":[]中定义的宏无法被识别。 从而导致代码中的宏开关无法生效&#xff0c;造成代码的阅读不便利。 排查路线是&#xff1a; 关闭所有插件&#xff0c;删除当前工程目录下的.vscode文件夹。 经过一系列排查发现是C/C插件与clangd插…

sdwan是硬件还是网络协议?

SD-WAN&#xff08;Software-Defined Wide Area Network&#xff0c;软件定义广域网&#xff09;并不是一个硬件产品或单一的网络协议&#xff0c;而是结合了软件、硬件和网络技术的一种解决方案。SD-WAN的核心在于其软件定义的特性&#xff0c;它通过软件来控制和管理广域网的…

一起振动分析案例

1.原始数据 数据出处&#xff1a;https://www.zhihu.com/question/317898467 其他信息&#xff1a;6203轴承&#xff0c;运行时转速6.4转/秒&#xff0c;底座产生大量倍频信号&#xff0c;是轴承存在问题吗&#xff1f;还是装配或者其它原因。 1.第一轮拆解&#xff1a;是否…

Flutter EasyRefresh:介绍与使用指南

什么是 Flutter EasyRefresh&#xff1f; Flutter EasyRefresh 是一个强大的下拉刷新和上拉加载组件&#xff0c;用于构建流畅且高效的 Flutter 应用程序。它提供了多种自定义配置和动画效果&#xff0c;使开发者可以轻松实现列表的刷新和加载功能。 主要功能 支持下拉刷新和…

构建图像金字塔遍历不同的大小

1、首先、构建金字塔&#xff0c;其中包括从原始图像到多层缩小后的图像。 import cv2# 读取原始图像 image cv2.imread(path_to_image)# 构建高斯金字塔 gaussian_pyramid [image] for i in range(6): # 这里假设构建6层image cv2.pyrDown(image) # 下采样gaussian_p…

Golang | Leetcode Golang题解之第227题基本计算器II

题目&#xff1a; 题解&#xff1a; func calculate(s string) (ans int) {stack : []int{}preSign : num : 0for i, ch : range s {isDigit : 0 < ch && ch < 9if isDigit {num num*10 int(ch-0)}if !isDigit && ch ! || i len(s)-1 {switch preS…

uni-app 蓝牙传输

https://www.cnblogs.com/ckfuture/p/16450418.html https://www.cnblogs.com/yangxiaobai123/p/16021058.html 字符串转base64&#xff1a;https://www.cnblogs.com/sunny3158/p/17312158.html 将 ArrayBuffer 对象转成 Base64 字符串&#xff1a;基础 - uni.arrayBufferT…

【css】image 使用 transform:scale 放大后显示不全的问题

css 可以用 transform: scale(1.2) 实现图片放大 1.2 倍显示的功能&#xff0c;在此基础上可以修改 transform-origin 为用户点击的坐标值优化体验。问题在于 origin 位于图片下方时&#xff0c;图片放大后出现滚动条&#xff0c;而滚动条的高度会忽略放大显示的图片的上半部分…

51单片机6(P0P1P2P3结构框架图)

一、GPIO结构框架图与工作原理 1、接下来我们介绍一下这个GPIO结构框图和工作原理&#xff0c;我们使用51单片机的GPIO分为了P0&#xff0c;P1&#xff0c;P2&#xff0c;P3这四组端口&#xff0c;下面我们就分别来介绍这四组端口它的一个内部结构&#xff0c;只有了解了内部的…

VIM模式之间的切换

命令行界面下&#xff0c;常用的文本编辑器是 VI / VIM(VI增强版)&#xff0c;VI 是 Linux 最通用的文本编辑器&#xff0c;VIM相较于VI&#xff0c;提供了代码高亮等功能&#xff0c;两者用法完全兼容&#xff1b; 1. 进入 VIM 工作界面 vim 文件名 2. 进入编辑模式 三种方…