col-page.vue
3.62 KB
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ColPage } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import {
Alert,
Button,
Card,
Checkbox,
Slider,
Tag,
Tooltip,
} from 'ant-design-vue';
const props = reactive({
leftCollapsedWidth: 5,
leftCollapsible: true,
leftMaxWidth: 50,
leftMinWidth: 20,
leftWidth: 30,
resizable: true,
rightWidth: 70,
splitHandle: true,
splitLine: true,
});
const leftMinWidth = ref(props.leftMinWidth || 1);
const leftMaxWidth = ref(props.leftMaxWidth || 100);
</script>
<template>
<ColPage
auto-content-height
description="ColPage 是一个双列布局组件，支持左侧折叠、拖拽调整宽度等功能。"
v-bind="props"
title="ColPage 双列布局组件"
>
<template #title>
<span class="mr-2 text-2xl font-bold">ColPage 双列布局组件</span>
<Tag color="hsl(var(--destructive))">Alpha</Tag>
</template>
<template #left="{ isCollapsed, expand }">
<div v-if="isCollapsed" @click="expand">
<Tooltip title="点击展开左侧">
<Button
shape="circle"
type="primary"
class="flex items-center justify-center"
>
<template #icon>
<IconifyIcon class="text-2xl" icon="bi:arrow-right" />
</template>
</Button>
</Tooltip>
</div>
<div
v-else
:style="{ minWidth: '200px' }"
class="mr-2 rounded-[var(--radius)] border border-border bg-card p-2"
>
<p>这里是左侧内容</p>
<p>这里是左侧内容</p>
<p>这里是左侧内容</p>
<p>这里是左侧内容</p>
<p>这里是左侧内容</p>
</div>
</template>
<Card class="ml-2" title="基本使用">
<div class="flex flex-col gap-2">
<div class="flex gap-2">
<Checkbox v-model="props.resizable">可拖动调整宽度</Checkbox>
<Checkbox v-model="props.splitLine">显示拖动分隔线</Checkbox>
<Checkbox v-model="props.splitHandle">显示拖动手柄</Checkbox>
<Checkbox v-model="props.leftCollapsible"> 左侧可折叠 </Checkbox>
</div>
<div class="flex items-center gap-2">
<span>左侧最小宽度百分比：</span>
<Slider
v-model:value="leftMinWidth"
:max="props.leftMaxWidth - 1"
:min="1"
style="width: 100px"
@after-change="(value) => (props.leftMinWidth = value as number)"
/>
<span>左侧最大宽度百分比：</span>
<Slider
v-model:value="props.leftMaxWidth"
:max="100"
:min="leftMaxWidth + 1"
style="width: 100px"
@after-change="(value) => (props.leftMaxWidth = value as number)"
/>
</div>
<Alert message="实验性的组件" show-icon type="warning">
<template #description>
<p>
双列布局组件是一个在Page组件上扩展的相对基础的布局组件，支持左侧折叠（当拖拽导致左侧宽度比最小宽度还要小时，还可以进入折叠状态）、拖拽调整宽度等功能。
</p>
<p>以上宽度设置的数值是百分比，最小值为1，最大值为100。</p>
<p class="font-bold text-red-600">
这是一个实验性的组件，用法可能会发生变动，也可能最终不会被采用。在其用法正式出现在文档中之前，不建议在生产环境中使用。
</p>
</template>
</Alert>
</div>
</Card>
</ColPage>
</template>