From 1df4b1f08a2e8f553db34e10cc1b8b5b1ff01572 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期六, 19 九月 2020 17:03:04 +0800
Subject: [PATCH] 统一左侧目录树伸缩行为
---
src/pages/datapush/index/App.vue | 98 ++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 81 insertions(+), 17 deletions(-)
diff --git a/src/pages/datapush/index/App.vue b/src/pages/datapush/index/App.vue
index d56eb85..ae3fccc 100644
--- a/src/pages/datapush/index/App.vue
+++ b/src/pages/datapush/index/App.vue
@@ -1,21 +1,25 @@
<template>
- <div class="flex-box bg-w p10">
+ <div class="flex-box bg-w ">
<div class="ev-left-list">
- <leftList
- ref="baseSync"
- listWidth="350px"
- title="鍚屾搴�"
- type="1"
- :isSelected="isSelected"
- :activeId="selectedId"
- @getEvents="getEventList"
- @del-list="delList"
- @add="changeToAdd"
- @enabled="eventSwitch"
- ></leftList>
+ <div class="resize-bar"></div>
+ <div class="resize-line"></div>
+ <div class="resize-save">
+ <leftList
+ ref="baseSync"
+ listWidth="350px"
+ title="鍚屾搴�"
+ type="1"
+ :isSelected="isSelected"
+ :activeId="selectedId"
+ @getEvents="getEventList"
+ @del-list="delList"
+ @add="changeToAdd"
+ @enabled="eventSwitch"
+ ></leftList>
+ </div>
</div>
- <div v-show="isShowRight">
+ <div v-show="isShowRight" style="height:100vh;overflow-y:auto">
<rightEvent
ref="right"
:eventObject="eventObject"
@@ -94,12 +98,72 @@
</script>
<style lang="scss">
-
+.flex-box{
+ height: 100%;
+}
.ev-left-list {
- border-right: 1px solid #e0e0e0;
- min-width: 384px;
+ //border-right: 1px solid #e0e0e0;
+ //min-width: 384px;
+ //height: 100vh;
+ height: 100vh;
+ position: relative;
+}
+.resize-save {
+ position: absolute;
+ top: 0;
+ right: 5px;
+ bottom: 0;
+ left: 0;
+ padding: 14px;
+ overflow-x: hidden;
+}
+.resize-bar {
+ width: 310px;
+ height: inherit;
+ resize: horizontal;
+ cursor: ew-resize;
+ opacity: 0;
+ overflow: scroll;
+ max-width: 500px; //璁惧畾鏈�澶ф媺浼搁暱搴�
+ min-width: 33px; //璁惧畾鏈�灏忓搴�
+}
+/* 鎷栨嫿绾� */
+.resize-line {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border-right: 2px solid #efefef;
+ border-left: 1px solid #e0e0e0;
+ pointer-events: none;
+}
+.resize-bar:hover ~ .resize-line,
+.resize-bar:active ~ .resize-line {
+ border-left: 1px dashed skyblue;
+}
+.resize-bar::-webkit-scrollbar {
+ width: 200px;
+ height: inherit;
}
+/* Firefox鍙湁涓嬮潰涓�灏忓潡鍖哄煙鍙互鎷変几 */
+@supports (-moz-user-select: none) {
+ .resize-bar:hover ~ .resize-line,
+ .resize-bar:active ~ .resize-line {
+ border-left: 1px solid #bbb;
+ }
+ .resize-bar:hover ~ .resize-line::after,
+ .resize-bar:active ~ .resize-line::after {
+ content: "";
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ bottom: 0;
+ right: -8px;
+ // background: url(./resize.svg);
+ background-size: 100% 100%;
+ }
+}
.ant-divider,
.ant-divider-vertical {
margin: 0 8px;
--
Gitblit v1.8.0