1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <script lang="ts" setup>
| import { useMoveLine } from '@/hooks/web/useMoveLine'
| import { ElAside } from 'element-plus-secondary'
| const { width, node } = useMoveLine('DATASET')
| </script>
|
| <template>
| <el-aside ref="node" :width="width + 'px'">
| <slot />
| </el-aside>
| </template>
|
| <style lang="less">
| .ed-aside {
| position: relative;
| }
| .sidebar-move-line {
| width: 4px;
| height: 100%;
| z-index: 1;
| position: absolute;
| cursor: col-resize;
| &:hover::after,
| &.dragging::after {
| width: 1px;
| height: 100%;
| content: '';
| z-index: 2;
| position: absolute;
| right: -1px;
| top: 0;
| background: var(--ed-color-primary);
| }
| }
| </style>
|
|
