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

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

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

    1. <template>
    2. 	<!--	<div class="el-dialog__header">-->
    3.  
    4. 	<!--	</div>-->
    5. 	<div >
    6. 		<!--搜索框-->
    7. 		<div class="top-wrapper ">
    8. 			<div class="search el-input el-input--suffix">
    9. 				<input
    10. 					type="text"
    11. 					autocomplete="off"
    12. 					placeholder="输入指标名称搜索"
    13. 					class="el-input__inner"
    14. 				/>
    15. 			</div>
    16. 		</div>
    17. 		<!--中部-->
    18. 		<div class="indicator-wrapper">
    19. 			<!--侧边栏   -->
    20. 			<div class="indicator-side">
    21. 				<a
    22. 					:class="{ 'indicator-category': true, 'indicator-category-active': item.checked }"
    23. 					v-for="item in sideList"
    24. 					:key="item.id"
    25. 					@click.prevent="categoryClick(item)"
    26. 					href="#!"
    27. 				>
    28. 					{{ item.name }}
    29. 				</a>
    30. 			</div>
    31. 			<!--中间选择器   -->
    32. 			<div class="indicator-body">
    33. 				<div class="indicator-block"
    34. 					 v-for="item in sideList"
    35. 					 :key="item.id" :id="'chen'+ item.id">
    36. 					<div class="indicator-group">
    37. 						<span class="indicator-title">{{ item.name }} </span>
    38. 					</div>
    39. 					<div class="el-row">
    40. 						<div class="el-col el-col-8" v-for="el in item.child " :key="el.id">
    41. 							<el-checkbox v-model="el.checked" class="el-checkbox__input el-checkbox"
    42. 							><span class="el-checkbox__label">{{ el.name }}</span></el-checkbox>
    43. 						</div>
    44. 					</div>
    45. 				</div>
    46. 			</div>
    47. 			<!--拖拽-->
    48. 			<div class="flex ">
    49. 				<div class="indicator-drag">
    50. 					<div class="indicator-content">
    51. 						<div class="drag-title">已选指标</div>
    52. 						<div class="drag-sec">拖动可自定义指标顺序</div>
    53. 						<div class="indicator-limit_low">
    54. 							<div class="drag-block not-allow mg2">账户名称</div>
    55. 						</div>
    56. 						<div class="drag-sepreate">以上指标将横向固定</div>
    57. 					</div>
    58. 					<div class="indicator-limit-many" style="max-height: 445px">
    59. 						<section
    60. 							v-draggable="[
    61. 							drag,
    62. 							{
    63. 								animation: 150,
    64. 								ghostClass: 'ghost',
    65. 								group: 'people',
    66. 								onUpdate,
    67. 								onAdd,
    68. 								onRemove
    69. 							}
    70. 						]"
    71. 							class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
    72. 						>
    73. 							<div
    74. 								v-for="item in drag"
    75. 								:key="item.id"
    76. 								class="drag-block hover-class all-scroll mg2"
    77. 								@click="dragClick(item)"
    78. 							>
    79. 								{{ item.name
    80. 								}}
    81. 								<el-icon
    82. 									@click="removeItem(item.id)"
    83. 									style="
    84. 									float: right;
    85. 									align-items: center;
    86. 									position: relative;
    87. 									top: 8px;
    88. 								"
    89. 									class="mg-icon-close close"
    90. 								>
    91. 									<close
    92. 									/>
    93. 								</el-icon>
    94. 							</div>
    95. 						</section>
    96. 						<div class="flex justify-between">
    97. 							<preview-list :list="drag" />
    98. 						</div>
    99. 					</div>
    100. 				</div>
    101. 			</div>
    102. 		</div>
    103. 	</div>
    104. </template>
    105.  
    106. <script setup lang="ts">
    107. import { ref } from "vue";
    108. import { vDraggable } from "vue-draggable-plus";
    109. import { Close } from "@element-plus/icons-vue";
    110.  
    111. const sideList = ref([
    112. 	{
    113. 		id: 1,
    114. 		name: "基本信息",
    115. 		child: [
    116. 			{
    117. 				id: 1,
    118. 				name: "账号名称"
    119. 			},
    120. 			{
    121. 				id: 2,
    122. 				name: "账户ID"
    123. 			},
    124. 			{
    125. 				id: 3,
    126. 				name: "账户主体"
    127. 			}
    128. 		]
    129. 	},
    130. 	{
    131. 		id: 2,
    132. 		name: "财务流水",
    133. 		child: [
    134. 			{
    135. 				id: 1,
    136. 				name: "共享赠款支出（￥）"
    137. 			},
    138. 			{
    139. 				id: 2,
    140. 				name: "账户总支出"
    141. 			},
    142. 			{
    143. 				id: 3,
    144. 				name: "账户现金支出"
    145. 			}
    146. 		]
    147. 	},
    148. 	{
    149. 		id: 3,
    150. 		name: "展现数据",
    151. 		child: [
    152. 			{
    153. 				id: 1,
    154. 				name: "消耗"
    155. 			},
    156. 			{
    157. 				id: 2,
    158. 				name: "展示数"
    159. 			},
    160. 			{
    161. 				id: 3,
    162. 				name: "平均千次展现费用"
    163. 			}
    164. 		]
    165. 	},
    166. 	{
    167. 		id: 4,
    168. 		name: "转化数据",
    169. 		child: [
    170. 			{
    171. 				id: 1,
    172. 				name: "转换数"
    173. 			},
    174. 			{
    175. 				id: 2,
    176. 				name: "转换陈本"
    177. 			},
    178. 			{
    179. 				id: 3,
    180. 				name: "转换率"
    181. 			}
    182. 		]
    183. 	},
    184. 	{
    185. 		id: 5,
    186. 		name: "转化数据(计费时间)",
    187. 		child: [
    188. 			{
    189. 				id: 1,
    190. 				name: "转化数（计费时间）"
    191. 			},
    192. 			{
    193. 				id: 2,
    194. 				name: "转化成本（计费时间）"
    195. 			},
    196. 			{
    197. 				id: 3,
    198. 				name: "深度转化次数（计费时间）"
    199. 			}
    200. 		]
    201. 	},
    202. 	{
    203. 		id: 6,
    204. 		name: " APP下载数据",
    205. 		child: [
    206. 			{
    207. 				id: 1,
    208. 				name: "安卓下载开始数"
    209. 			},
    210. 			{
    211. 				id: 2,
    212. 				name: "安卓下载开始成本"
    213. 			},
    214. 			{
    215. 				id: 3,
    216. 				name: "安卓下载开始率"
    217. 			}
    218. 		]
    219. 	},
    220. 	{
    221. 		id: 7,
    222. 		name: "视频数据",
    223. 		child: [
    224. 			{
    225. 				id: 1,
    226. 				name: "播放数"
    227. 			},
    228. 			{
    229. 				id: 2,
    230. 				name: "有效播放数"
    231. 			},
    232. 			{
    233. 				id: 3,
    234. 				name: "有效播放率"
    235. 			}
    236. 		]
    237. 	},
    238. 	{
    239. 		id: 8,
    240. 		name: "落地页及门店数据",
    241. 		child: [
    242. 			{
    243. 				id: 1,
    244. 				name: "点击电话按钮"
    245. 			},
    246. 			{
    247. 				id: 2,
    248. 				name: "表单提交"
    249. 			},
    250. 			{
    251. 				id: 3,
    252. 				name: "地图搜索"
    253. 			}
    254. 		]
    255. 	},
    256. 	{
    257. 		id: 9,
    258. 		name: "附加创意",
    259. 		child: [
    260. 			{
    261. 				id: 1,
    262. 				name: "附加创意电话按钮点击"
    263. 			},
    264. 			{
    265. 				id: 2,
    266. 				name: "附加创意在线咨询点击"
    267. 			},
    268. 			{
    269. 				id: 3,
    270. 				name: "附加创意表单按钮点击"
    271. 			}
    272. 		]
    273. 	},
    274. 	{
    275. 		id: 10,
    276. 		name: "互动数据",
    277. 		child: [
    278. 			{
    279. 				id: 1,
    280. 				name: "新增关注数"
    281. 			},
    282. 			{
    283. 				id: 2,
    284. 				name: "点赞数"
    285. 			},
    286. 			{
    287. 				id: 3,
    288. 				name: "评论提交数"
    289. 			}
    290. 		]
    291. 	},
    292. 	{
    293. 		id: 11,
    294. 		name: " 直播间数据",
    295. 		child: [
    296. 			{
    297. 				id: 1,
    298. 				name: "直播间观看数"
    299. 			},
    300. 			{
    301. 				id: 2,
    302. 				name: "直播间超过1分钟观看数"
    303. 			},
    304. 			{
    305. 				id: 3,
    306. 				name: "直播间关注数"
    307. 			}
    308. 		]
    309. 	},
    310. 	{
    311. 		id: 12,
    312. 		name: "游戏行业",
    313. 		child: [
    314. 			{
    315. 				id: 1,
    316. 				name: "当日付费金额"
    317. 			},
    318. 			{
    319. 				id: 2,
    320. 				name: "当日付费ROI"
    321. 			},
    322. 			{
    323. 				id: 3,
    324. 				name: "激活24h首次付费数"
    325. 			}
    326. 		]
    327. 	},
    328. 	{
    329. 		id: 13,
    330. 		name: "线索收集",
    331. 		child: [
    332. 			{
    333. 				id: 1,
    334. 				name: "有效获客"
    335. 			},
    336. 			{
    337. 				id: 2,
    338. 				name: "乘客首次下单数"
    339. 			},
    340. 			{
    341. 				id: 3,
    342. 				name: "回访—加好友（计费时间）"
    343. 			}
    344. 		]
    345. 	}
    346. ]);
    347.  
    348. const categoryClick = (item) => {
    349. 	sideList.value.forEach((el) => (el.checked = false));
    350. 	item.checked = !item.checked;
    351. 	const element = document.getElementById("chen" + item.id);
    352. 	if (element) {
    353. 		element.scrollIntoView({ behavior: "smooth" });
    354. 	}
    355.  
    356. };
    357.  
    358. const count = ref(0);
    359.  
    360. const removeItem = (id) => {
    361. 	drag.value = drag.value.filter(item => item.id != id);
    362.  
    363.  
    364. };
    365. // const domeRef = ref<HTMLElement | null>(null);
    366. // const handleClick = (MouseEvent) => {
    367. // 	e.preventDefault();
    368. // };
    369. //拖拽
    370. const drag = ref([
    371. 	{
    372. 		id: 1,
    373. 		name: "账户ID"
    374. 	},
    375. 	{
    376. 		id: 2,
    377. 		name: "备注"
    378. 	},
    379. 	{
    380. 		id: 3,
    381. 		name: "项目"
    382. 	},
    383. 	{
    384. 		id: 4,
    385. 		name: "登录邮箱"
    386. 	},
    387. 	{
    388. 		id: 5,
    389. 		name: "账户余额(元)"
    390. 	},
    391. 	{
    392. 		id: 6,
    393. 		name: "消耗"
    394. 	},
    395. 	{
    396. 		id: 7,
    397. 		name: "点击率"
    398. 	},
    399. 	{
    400. 		id: 8,
    401. 		name: "深度转化成本"
    402. 	},
    403. 	{
    404. 		id: 9,
    405. 		name: "首次付费率"
    406. 	},
    407. 	{
    408. 		id: 10,
    409. 		name: "APP内访问"
    410. 	},
    411. 	{
    412. 		id: 11,
    413. 		name: "app内下单"
    414. 	}
    415. ]);
    416. const dragClick = (item) => {
    417. 	drag.value.forEach((el) => (el.checked = false));
    418. 	item.checked = !item.checked;
    419. };
    420.  
    421. function onUpdate() {
    422. 	console.log("update");
    423. }
    424.  
    425. function onAdd() {
    426. 	console.log("add");
    427. }
    428.  
    429. function onRemove() {
    430. 	console.log("remove");
    431. }
    432. </script>
    433.  
    434. <style scoped lang="scss">
    435. ::v-deep .el-scrollbar {
    436. 	overflow: hidden;
    437. 	height: 100%;
    438. 	position: static !important;
    439. }
    440.  
    441. ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    442. 	background-color:  #409eff;;
    443. 	//border-color: var(--el-checkbox-checked-input-border-color);
    444. }
    445. //隐藏滚动条
    446. ::-webkit-scrollbar-thumb {
    447. 	border-radius: 5px;
    448. 	background-color: rgb(255, 255, 255, 0.2);;
    449. }
    450.  
    451. ::-webkit-scrollbar {
    452. 	width: 10px;
    453. 	height: 10px;
    454. }
    455. //搜索框
    456. .top-wrapper {
    457. 	display: flex;
    458. 	justify-content: flex-start;
    459. 	margin-bottom: 16px;
    460. }
    461.  
    462. .top-wrapper .search {
    463. 	width: 250px;
    464. }
    465.  
    466. .el-input {
    467. 	position: relative;
    468. 	font-size: 14px;
    469. }
    470.  
    471. .el-input__inner {
    472. 	-webkit-appearance: none;
    473. 	background-color: #fff;
    474. 	background-image: none;
    475. 	border-radius: 4px;
    476. 	border: 1px solid #dcdfe6;
    477. 	box-sizing: border-box;
    478. 	color: #606266;
    479. 	display: inline-block;
    480. 	height: 40px;
    481. 	line-height: 40px;
    482. 	outline: 0;
    483. 	padding: 0 15px;
    484. 	transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    485. 	width: 100%;
    486. 	font-size: inherit;
    487. 	-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    488. }
    489. .el-dialog .el-dialog__body .el-input .el-input__inner {
    490. 	padding-left: 8px;
    491. 	color: #333;
    492. }
    493.  
    494. .el-input .el-input__inner {
    495. 	height: 32px;
    496. 	line-height: 32px;
    497. 	border-radius: 2px;
    498. }
    499.  
    500. //侧边栏
    501. .indicator-side .indicator-category {
    502. 	padding-left: 16px;
    503. 	font-size: 14px;
    504. 	line-height: 40px;
    505. 	color: #333;
    506. 	cursor: pointer;
    507. 	display: block;
    508. }
    509.  
    510. .indicator-side .indicator-category-active {
    511. 	color: #197afb;
    512. 	background-color: #d6eaff;
    513. }
    514.  
    515. //中间基本信息
    516. .indicator-block {
    517. 	padding: 16px 0 0 24px;
    518. 	border-bottom: 1px solid #eaebec;
    519. }
    520.  
    521. .indicator-group {
    522. 	display: flex;
    523. 	justify-content: flex-start;
    524. }
    525.  
    526. .indicator-title {
    527. 	margin-bottom: 16px;
    528. 	font-weight: 700;
    529. 	color: #333;
    530. }
    531.  
    532. .el-checkbox__input.is-checked .el-checkbox__label{
    533. 	color: #409eff;
    534. }
    535.  
    536. .el-checkbox__label {
    537. 	color: #333;
    538. }
    539.  
    540. .el-checkbox__label,
    541. .el-radio__label {
    542. 	font-size: 12px;
    543. 	color: #666;
    544. }
    545.  
    546. .el-checkbox__label {
    547. 	display: inline-block;
    548. 	padding-left: 1px;
    549. 	line-height: 19px;
    550. 	font-size: 12px;
    551. }
    552.  
    553. //拖拽
    554. .indicator-drag .indicator-content {
    555. 	padding: 0 16px;
    556. }
    557.  
    558. .indicator-drag .drag-title {
    559. 	font-size: 14px;
    560. 	font-weight: 700;
    561. 	line-height: 100%;
    562. 	color: #333;
    563. }
    564.  
    565. .indicator-drag .drag-sec {
    566. 	margin: 8px 0;
    567. 	font-size: 12px;
    568. 	line-height: 100%;
    569. 	color: #999;
    570. }
    571. .indicator-drag .drag-sepreate {
    572. 	position: relative;
    573. 	margin: 16px 0 0;
    574. 	font-size: 12px;
    575. 	color: #999;
    576. 	text-align: center;
    577. }
    578.  
    579. .indicator-drag .indicator-limit-many {
    580. 	max-height: 445px;
    581. 	padding: 0 16px;
    582. 	margin-top: 16px;
    583. 	overflow-x: hidden;
    584. 	overflow-y: auto;
    585. }
    586.  
    587.  
    588. .indicator-drag .mg2 {
    589. 	margin-bottom: 2px;
    590. }
    591.  
    592. .indicator-drag .drag-block {
    593. 	position: relative;
    594. 	height: 40px;
    595. 	//width: 134px;
    596. 	padding: 0 30px 0 36px;
    597. 	overflow: hidden;
    598. 	line-height: 40px;
    599. 	text-overflow: ellipsis;
    600. 	white-space: nowrap;
    601. 	background-color: #fff;
    602. 	border-bottom: 1px solid #e8eaec;
    603. }
    604.  
    605.  
    606. .indicator-drag .drag-block .close {
    607. 	position: absolute;
    608. 	top: 13px;
    609. 	line-height: 100%;
    610. 	color: #cecece;
    611. 	cursor: pointer;
    612. }
    613.  
    614. //滑动条
    615. .infinite-list {
    616. 	width: 160px;
    617. 	height: 300px;
    618. 	padding: 0;
    619. 	margin: 0;
    620. 	list-style: none;
    621. }
    622.  
    623. .infinite-list .infinite-list-item {
    624. 	display: flex;
    625. 	align-items: center;
    626. 	justify-content: center;
    627. 	height: 40px;
    628. 	padding-left: 16px;
    629. 	font-size: 14px;
    630. 	background: #409eff;
    631. 	margin: 10px;
    632. 	color: #409eff;
    633. }
    634.  
    635. .infinite-list .infinite-list-item + .list-item {
    636. 	margin-top: 10px;
    637. }
    638.  
    639. //中部
    640. .indicator-wrapper {
    641. 	display: flex;
    642. 	width: 832px;
    643. 	height: 516px;
    644. 	border: 1px solid #eaebec;
    645. 	border-radius: 4px;
    646.  
    647. }
    648.  
    649. //侧边栏
    650. .indicator-side {
    651. 	flex-shrink: 0;
    652. 	width: 160px;
    653. 	overflow: auto;
    654. 	border-right: 1px solid #eaebec;
    655. }
    656.  
    657. //选择器
    658. .indicator-body {
    659. 	width: 672px;
    660. 	overflow: auto;
    661. 	scroll-behavior: smooth;
    662. }
    663.  
    664. //右边
    665. .indicator-drag {
    666. 	position: absolute;
    667. 	top: 0;
    668. 	right: 0;
    669. 	flex-shrink: 0;
    670. 	width: 216px;
    671. 	//height: 676px;
    672. 	padding: 25px 0;
    673. 	overflow: auto;
    674. 	background-color: #f8f8f9;
    675. 	border-right: 1px solid #eaebec;
    676. }
    677. </style>

  • 相关阅读:
    SPOJ 4110 Fast Maximum Flow (最大流模板)
    C语言之婚礼上的谎言
    RestFul，会话技术，Fiddler
    自动翻译软件-批量批量自动翻译软件推荐
    py19_初识 Python 异常处理的简单总结
    Java初始化大量数据到Neo4j中(一)
    物联网鸿蒙实训解决方案
    数据结构和算法（10）：B-树
    chrome 录制器及性能分析工具的使用
    8月榜单丨飞瓜数据B站UP主排行榜（哔哩哔哩平台）发布！
  • 原文地址：https://blog.csdn.net/2301_78133614/article/details/140375386