feat(project): 添加vben5前端
This commit is contained in:
wcg
@@ -0,0 +1,47 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenDrawer } from '@vben/common-ui';
|
||||
|
||||
import { Button, message } from 'ant-design-vue';
|
||||
|
||||
const list = ref<number[]>([]);
|
||||
|
||||
const [Drawer, drawerApi] = useVbenDrawer({
|
||||
onCancel() {
|
||||
drawerApi.close();
|
||||
},
|
||||
onConfirm() {
|
||||
message.info('onConfirm');
|
||||
// drawerApi.close();
|
||||
},
|
||||
onOpenChange(isOpen) {
|
||||
if (isOpen) {
|
||||
handleUpdate(10);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
function handleUpdate(len: number) {
|
||||
drawerApi.setState({ loading: true });
|
||||
setTimeout(() => {
|
||||
list.value = Array.from({ length: len }, (_v, k) => k + 1);
|
||||
drawerApi.setState({ loading: false });
|
||||
}, 2000);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Drawer title="自动计算高度">
|
||||
<div
|
||||
v-for="item in list"
|
||||
:key="item"
|
||||
class="even:bg-heavy bg-muted flex-center h-[220px] w-full"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
|
||||
<template #prepend-footer>
|
||||
<Button type="link" @click="handleUpdate(6)">点击更新数据</Button>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,35 @@
|
||||
<script lang="ts" setup>
|
||||
import { useVbenDrawer } from '@vben/common-ui';
|
||||
|
||||
import { Button, message } from 'ant-design-vue';
|
||||
|
||||
const [Drawer, drawerApi] = useVbenDrawer({
|
||||
onCancel() {
|
||||
drawerApi.close();
|
||||
},
|
||||
onClosed() {
|
||||
drawerApi.setState({ overlayBlur: 0, placement: 'right' });
|
||||
},
|
||||
onConfirm() {
|
||||
message.info('onConfirm');
|
||||
// drawerApi.close();
|
||||
},
|
||||
});
|
||||
|
||||
function lockDrawer() {
|
||||
drawerApi.lock();
|
||||
setTimeout(() => {
|
||||
drawerApi.unlock();
|
||||
}, 3000);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Drawer title="基础抽屉示例" title-tooltip="标题提示内容">
|
||||
<template #extra> extra </template>
|
||||
base demo
|
||||
<Button type="primary" @click="lockDrawer">锁定抽屉状态</Button>
|
||||
<!-- <template #prepend-footer> slot </template> -->
|
||||
<!-- <template #append-footer> prepend slot </template> -->
|
||||
<!-- <template #center-footer> center slot </template> -->
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script lang="ts" setup>
|
||||
import { useVbenDrawer } from '@vben/common-ui';
|
||||
|
||||
import { Button, message } from 'ant-design-vue';
|
||||
|
||||
const [Drawer, drawerApi] = useVbenDrawer({
|
||||
onCancel() {
|
||||
drawerApi.close();
|
||||
},
|
||||
onConfirm() {
|
||||
message.info('onConfirm');
|
||||
// drawerApi.close();
|
||||
},
|
||||
title: '动态修改配置示例',
|
||||
});
|
||||
|
||||
// const state = drawerApi.useStore();
|
||||
|
||||
function handleUpdateTitle() {
|
||||
drawerApi.setState({ title: '内部动态标题' });
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Drawer>
|
||||
<div class="flex-col-center">
|
||||
<Button class="mb-3" type="primary" @click="handleUpdateTitle()">
|
||||
内部动态修改标题
|
||||
</Button>
|
||||
</div>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script lang="ts" setup>
|
||||
import { useVbenDrawer } from '@vben/common-ui';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
|
||||
defineOptions({
|
||||
name: 'FormDrawerDemo',
|
||||
});
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
schema: [
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
fieldName: 'field1',
|
||||
label: '字段1',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
fieldName: 'field2',
|
||||
label: '字段2',
|
||||
rules: 'required',
|
||||
},
|
||||
],
|
||||
showDefaultActions: false,
|
||||
});
|
||||
const [Drawer, drawerApi] = useVbenDrawer({
|
||||
onCancel() {
|
||||
drawerApi.close();
|
||||
},
|
||||
onConfirm: async () => {
|
||||
await formApi.submitForm();
|
||||
drawerApi.close();
|
||||
},
|
||||
onOpenChange(isOpen: boolean) {
|
||||
if (isOpen) {
|
||||
const { values } = drawerApi.getData<Record<string, any>>();
|
||||
if (values) {
|
||||
formApi.setValues(values);
|
||||
}
|
||||
}
|
||||
},
|
||||
title: '内嵌表单示例',
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Drawer>
|
||||
<Form />
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,48 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenDrawer } from '@vben/common-ui';
|
||||
|
||||
import { Input, message } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
|
||||
const value = ref('');
|
||||
|
||||
const [Form] = useVbenForm({
|
||||
schema: [
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: 'KeepAlive测试：内部组件',
|
||||
},
|
||||
fieldName: 'field1',
|
||||
hideLabel: true,
|
||||
label: '字段1',
|
||||
},
|
||||
],
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
const [Drawer, drawerApi] = useVbenDrawer({
|
||||
destroyOnClose: false,
|
||||
onCancel() {
|
||||
drawerApi.close();
|
||||
},
|
||||
onConfirm() {
|
||||
message.info('onConfirm');
|
||||
// drawerApi.close();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Drawer append-to-main title="基础抽屉示例" title-tooltip="标题提示内容">
|
||||
<template #extra> extra </template>
|
||||
此弹窗指定在内容区域打开，并且在关闭之后弹窗内容不会被销毁
|
||||
<Input
|
||||
v-model:value="value"
|
||||
placeholder="KeepAlive测试:connectedComponent"
|
||||
/>
|
||||
<Form />
|
||||
</Drawer>
|
||||
</template>
|
||||
195
Yi.Vben5.Vue3/playground/src/views/examples/drawer/index.vue
Normal file
195
Yi.Vben5.Vue3/playground/src/views/examples/drawer/index.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<script lang="ts" setup>
|
||||
import type { DrawerPlacement, DrawerState } from '@vben/common-ui';
|
||||
|
||||
import { Page, useVbenDrawer } from '@vben/common-ui';
|
||||
|
||||
import { Button, Card } from 'ant-design-vue';
|
||||
|
||||
import DocButton from '../doc-button.vue';
|
||||
import AutoHeightDemo from './auto-height-demo.vue';
|
||||
import BaseDemo from './base-demo.vue';
|
||||
import DynamicDemo from './dynamic-demo.vue';
|
||||
import FormDrawerDemo from './form-drawer-demo.vue';
|
||||
import inContentDemo from './in-content-demo.vue';
|
||||
import SharedDataDemo from './shared-data-demo.vue';
|
||||
|
||||
defineOptions({ name: 'DrawerExample' });
|
||||
const [BaseDrawer, baseDrawerApi] = useVbenDrawer({
|
||||
// 连接抽离的组件
|
||||
connectedComponent: BaseDemo,
|
||||
// placement: 'left',
|
||||
});
|
||||
|
||||
const [InContentDrawer, inContentDrawerApi] = useVbenDrawer({
|
||||
// 连接抽离的组件
|
||||
connectedComponent: inContentDemo,
|
||||
// placement: 'left',
|
||||
});
|
||||
|
||||
const [AutoHeightDrawer, autoHeightDrawerApi] = useVbenDrawer({
|
||||
connectedComponent: AutoHeightDemo,
|
||||
});
|
||||
|
||||
const [DynamicDrawer, dynamicDrawerApi] = useVbenDrawer({
|
||||
connectedComponent: DynamicDemo,
|
||||
});
|
||||
|
||||
const [SharedDataDrawer, sharedDrawerApi] = useVbenDrawer({
|
||||
connectedComponent: SharedDataDemo,
|
||||
});
|
||||
|
||||
const [FormDrawer, formDrawerApi] = useVbenDrawer({
|
||||
connectedComponent: FormDrawerDemo,
|
||||
});
|
||||
|
||||
function openBaseDrawer(placement: DrawerPlacement = 'right') {
|
||||
baseDrawerApi.setState({ placement }).open();
|
||||
}
|
||||
|
||||
function openBlurDrawer() {
|
||||
baseDrawerApi.setState({ overlayBlur: 5 }).open();
|
||||
}
|
||||
|
||||
function openInContentDrawer(placement: DrawerPlacement = 'right') {
|
||||
const state: Partial<DrawerState> = { class: '', placement };
|
||||
if (placement === 'top') {
|
||||
// 页面顶部区域的层级只有200，所以设置一个低于200的值，抽屉从顶部滑出来的时候才比较合适
|
||||
state.zIndex = 199;
|
||||
}
|
||||
inContentDrawerApi.setState(state).open();
|
||||
}
|
||||
|
||||
function openMaxContentDrawer() {
|
||||
// 这里只是用来演示方便。实际上自己使用的时候可以直接将这些配置卸载Drawer的属性里
|
||||
inContentDrawerApi.setState({ class: 'w-full', placement: 'right' }).open();
|
||||
}
|
||||
|
||||
function openAutoHeightDrawer() {
|
||||
autoHeightDrawerApi.open();
|
||||
}
|
||||
|
||||
function openDynamicDrawer() {
|
||||
dynamicDrawerApi.open();
|
||||
}
|
||||
|
||||
function handleUpdateTitle() {
|
||||
dynamicDrawerApi.setState({ title: '外部动态标题' }).open();
|
||||
}
|
||||
|
||||
function openSharedDrawer() {
|
||||
sharedDrawerApi
|
||||
.setData({
|
||||
content: '外部传递的数据 content',
|
||||
payload: '外部传递的数据 payload',
|
||||
})
|
||||
.open();
|
||||
}
|
||||
|
||||
function openFormDrawer() {
|
||||
formDrawerApi
|
||||
.setData({
|
||||
// 表单值
|
||||
values: { field1: 'abc', field2: '123' },
|
||||
})
|
||||
.open();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page
|
||||
auto-content-height
|
||||
description="抽屉组件通常用于在当前页面上显示一个覆盖层，用以展示重要信息或提供用户交互界面。"
|
||||
title="抽屉组件示例"
|
||||
>
|
||||
<template #extra>
|
||||
<DocButton path="/components/common-ui/vben-drawer" />
|
||||
</template>
|
||||
<BaseDrawer />
|
||||
<InContentDrawer />
|
||||
<AutoHeightDrawer />
|
||||
<DynamicDrawer />
|
||||
<SharedDataDrawer />
|
||||
<FormDrawer />
|
||||
|
||||
<Card class="mb-4" title="基本使用">
|
||||
<p class="mb-3">一个基础的抽屉示例</p>
|
||||
<Button class="mb-2" type="primary" @click="openBaseDrawer('right')">
|
||||
右侧打开
|
||||
</Button>
|
||||
<Button
|
||||
class="mb-2 ml-2"
|
||||
type="primary"
|
||||
@click="openBaseDrawer('bottom')"
|
||||
>
|
||||
底部打开
|
||||
</Button>
|
||||
<Button class="mb-2 ml-2" type="primary" @click="openBaseDrawer('left')">
|
||||
左侧打开
|
||||
</Button>
|
||||
<Button class="mb-2 ml-2" type="primary" @click="openBaseDrawer('top')">
|
||||
顶部打开
|
||||
</Button>
|
||||
<Button class="mb-2 ml-2" type="primary" @click="openBlurDrawer">
|
||||
遮罩层模糊效果
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-4" title="在内容区域打开">
|
||||
<p class="mb-3">指定抽屉在内容区域打开，不会覆盖顶部和左侧菜单等区域</p>
|
||||
<Button class="mb-2" type="primary" @click="openInContentDrawer('right')">
|
||||
右侧打开
|
||||
</Button>
|
||||
<Button
|
||||
class="mb-2 ml-2"
|
||||
type="primary"
|
||||
@click="openInContentDrawer('bottom')"
|
||||
>
|
||||
底部打开
|
||||
</Button>
|
||||
<Button
|
||||
class="mb-2 ml-2"
|
||||
type="primary"
|
||||
@click="openInContentDrawer('left')"
|
||||
>
|
||||
左侧打开
|
||||
</Button>
|
||||
<Button
|
||||
class="mb-2 ml-2"
|
||||
type="primary"
|
||||
@click="openInContentDrawer('top')"
|
||||
>
|
||||
顶部打开
|
||||
</Button>
|
||||
<Button class="mb-2 ml-2" type="primary" @click="openMaxContentDrawer">
|
||||
内容区域全屏打开
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-4" title="内容高度自适应滚动">
|
||||
<p class="mb-3">可根据内容自动计算滚动高度</p>
|
||||
<Button type="primary" @click="openAutoHeightDrawer">打开抽屉</Button>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-4" title="动态配置示例">
|
||||
<p class="mb-3">通过 setState 动态调整抽屉数据</p>
|
||||
<Button type="primary" @click="openDynamicDrawer">打开抽屉</Button>
|
||||
<Button class="ml-2" type="primary" @click="handleUpdateTitle">
|
||||
从外部修改标题并打开
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-4" title="内外数据共享示例">
|
||||
<p class="mb-3">通过共享 sharedData 来进行数据交互</p>
|
||||
<Button type="primary" @click="openSharedDrawer">
|
||||
打开抽屉并传递数据
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-4" title="表单抽屉示例">
|
||||
<p class="mb-3">打开抽屉并设置表单schema以及数据</p>
|
||||
<Button type="primary" @click="openFormDrawer">
|
||||
打开抽屉并设置表单schema以及数据
|
||||
</Button>
|
||||
</Card>
|
||||
</Page>
|
||||
</template>
|
||||
@@ -0,0 +1,29 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenDrawer } from '@vben/common-ui';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const data = ref();
|
||||
|
||||
const [Drawer, drawerApi] = useVbenDrawer({
|
||||
onCancel() {
|
||||
drawerApi.close();
|
||||
},
|
||||
onConfirm() {
|
||||
message.info('onConfirm');
|
||||
// drawerApi.close();
|
||||
},
|
||||
onOpenChange(isOpen: boolean) {
|
||||
if (isOpen) {
|
||||
data.value = drawerApi.getData<Record<string, any>>();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Drawer title="数据共享示例">
|
||||
<div class="flex-col-center">外部传递数据： {{ data }}</div>
|
||||
</Drawer>
|
||||
</template>
|
||||
Reference in New Issue
Block a user