u
This commit is contained in:
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>
|
||||
|
||||
|
||||
Reference in new issue
Block a user