This commit is contained in:
oneao committed 2026-10-09 17:32:14 +08:00
1 parent e99a9fb274
commit 0be0b0767a
788 files changed
+112023 -14941

No files matched your search

@@ -1,29 +1,17 @@
<script setup lang="ts">
// 最基础:左右分栏。给了 defaultSize 的一侧固定,另一侧自动填充剩余空间
import { ref } from 'vue'
import { G3Splitter, G3SplitterPanel } from '@g3soft/ui'
const lastSizes = ref<number[]>([])
</script>
<template>
<div>
<G3Splitter
style="height: 200px; border: 1px solid #d9d9d9; border-radius: 8px"
@resize="(sizes: number[]) => (lastSizes = sizes)"
>
<G3SplitterPanel :default-size="240">
<div class="pane">左侧 240px(可拖拽调整)</div>
</G3SplitterPanel>
<G3SplitterPanel>
<div class="pane">右侧自动填充</div>
</G3SplitterPanel>
</G3Splitter>
<p style="margin: 8px 0 0; font-size: 12px; color: #6b7280">
面板宽度:{{ lastSizes.join(' / ') || '(拖拽后显示)' }}
</p>
</div>
<G3Splitter style="height: 200px; border: 1px solid #d9d9d9; border-radius: 8px">
<G3SplitterPanel :default-size="240">
<div class="pane">左侧</div>
</G3SplitterPanel>
<G3SplitterPanel>
<div class="pane">右侧</div>
</G3SplitterPanel>
</G3Splitter>
</template>
<style scoped>
@@ -8,20 +8,16 @@ const lockLeft = ref(false)
<template>
<G3Space direction="vertical" :size="12" style="display: flex">
<G3Switch v-model="lockLeft">左侧不可拖动(resizable=false)</G3Switch>
<G3Switch v-model="lockLeft">左侧不可拖动</G3Switch>
<G3Splitter style="height: 200px; border: 1px solid #d9d9d9; border-radius: 8px">
<G3SplitterPanel :min="160" :max="'50%'" :resizable="!lockLeft" :default-size="240">
<div class="pane">左侧:最小 160px,最大 50%</div>
<div class="pane">左侧</div>
</G3SplitterPanel>
<G3SplitterPanel :min="200">
<div class="pane">右侧:最小 200px</div>
<div class="pane">右侧</div>
</G3SplitterPanel>
</G3Splitter>
<p style="margin: 0; font-size: 12px; color: #6b7280">
拖到边界会被钳制住;键盘用户可 Tab 聚焦分割线后用 ← → 调整(Shift 加速)
</p>
</G3Space>
</template>