|
@@ -1,27 +1,27 @@
|
|
|
<template>
|
|
|
<div class="hc-page-layout-box split" :class="ui">
|
|
|
- <div class="hc-layout-left-box" :id="'page-' + left_uuid">
|
|
|
- <slot name="left"></slot>
|
|
|
+ <div :id="`page-${left_uuid}`" class="hc-layout-left-box">
|
|
|
+ <slot name="left" />
|
|
|
</div>
|
|
|
- <div class="hc-page-content-box" :id="'page-' + page_uuid">
|
|
|
- <slot></slot>
|
|
|
+ <div :id="`page-${page_uuid}`" class="hc-page-content-box">
|
|
|
+ <slot />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {onMounted, onUnmounted, ref} from "vue";
|
|
|
-import {getRandom} from "js-fast-way";
|
|
|
-import split from "split.js";
|
|
|
+import { onMounted, onUnmounted, ref } from 'vue'
|
|
|
+import { getRandom } from 'js-fast-way'
|
|
|
+import split from 'split.js'
|
|
|
|
|
|
//参数
|
|
|
const props = defineProps({
|
|
|
- ui: String
|
|
|
+ ui: String,
|
|
|
})
|
|
|
|
|
|
//变量
|
|
|
-const left_uuid = getRandom(8);
|
|
|
-const page_uuid = getRandom(8);
|
|
|
+const left_uuid = getRandom(8)
|
|
|
+const page_uuid = getRandom(8)
|
|
|
|
|
|
//渲染完成
|
|
|
onMounted(()=> {
|
|
@@ -29,17 +29,17 @@ onMounted(()=> {
|
|
|
})
|
|
|
|
|
|
// 初始化设置拖动分割线
|
|
|
-const splitvar = ref(null);
|
|
|
+const splitvar = ref(null)
|
|
|
const setSplitDom = () => {
|
|
|
try {
|
|
|
//配置参考: https://split.js.org/#/?direction=vertical&snapOffset=0
|
|
|
splitvar.value = split([
|
|
|
`#page-${left_uuid}`,
|
|
|
- `#page-${page_uuid}`
|
|
|
+ `#page-${page_uuid}`,
|
|
|
], {
|
|
|
sizes: [20, 80],
|
|
|
minSize: [200, 900],
|
|
|
- });
|
|
|
+ })
|
|
|
} catch (e) {
|
|
|
setTimeout(() => {
|
|
|
setSplitDom()
|
|
@@ -61,6 +61,7 @@ onUnmounted(() => {
|
|
|
.hc-layout-left-box {
|
|
|
margin-right: 3px;
|
|
|
box-shadow: var(--hc-box-shadow);
|
|
|
+ background-color:#fff;
|
|
|
}
|
|
|
.gutter {
|
|
|
background-color: transparent;
|