chore: modal/drawer demo
This commit is contained in:
dap
parent
54940dfec5
commit
257dda6b0a
28
apps/web-antd/src/views/system/user/drawer.vue
Normal file
28
apps/web-antd/src/views/system/user/drawer.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import { useVbenDrawer } from '@vben/common-ui';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const [BasicDrawer, drawerApi] = useVbenDrawer({
|
||||
onCancel() {
|
||||
drawerApi.close();
|
||||
},
|
||||
onConfirm() {
|
||||
message.info('点击了确认');
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicDrawer
|
||||
class="w-[600px]"
|
||||
title="基础弹窗示例"
|
||||
title-tooltip="标题提示内容"
|
||||
>
|
||||
<div
|
||||
class="flex h-40 cursor-pointer items-center justify-center rounded-lg bg-pink-500 font-bold text-white transition-all hover:bg-blue-600 hover:text-[20px]"
|
||||
>
|
||||
this is Drawer content
|
||||
</div>
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
@ -1,6 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
|
||||
import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import {
|
||||
Tag as ATag,
|
||||
Button,
|
||||
@ -8,11 +10,14 @@ import {
|
||||
RadioButton,
|
||||
RadioGroup,
|
||||
Select,
|
||||
Space,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { DictTag } from '#/components/Dict';
|
||||
import { getDict, getDictOptions } from '#/utils/dict';
|
||||
|
||||
import DrawerDemo from './drawer.vue';
|
||||
import ModalDemo from './modal.vue';
|
||||
import TableTest from './table';
|
||||
|
||||
const count = ref(0);
|
||||
@ -30,6 +35,14 @@ const sexOptions = getDictOptions('sys_user_sex');
|
||||
const disabledDict = getDict('sys_normal_disable');
|
||||
const select = ref('pc');
|
||||
const deviceOptions = getDictOptions('sys_device_type');
|
||||
|
||||
const [TestNodal, modalApi] = useVbenModal({
|
||||
connectedComponent: ModalDemo,
|
||||
});
|
||||
|
||||
const [TestDrawer, drawerApi] = useVbenDrawer({
|
||||
connectedComponent: DrawerDemo,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -84,5 +97,13 @@ const deviceOptions = getDictOptions('sys_device_type');
|
||||
<Card title="table测试">
|
||||
<TableTest />
|
||||
</Card>
|
||||
<Card title="Modal/Drawer测试">
|
||||
<Space>
|
||||
<a-button @click="() => modalApi.open()">打开Modal</a-button>
|
||||
<a-button @click="() => drawerApi.open()">打开Drawer</a-button>
|
||||
</Space>
|
||||
<TestNodal />
|
||||
<TestDrawer />
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
24
apps/web-antd/src/views/system/user/modal.vue
Normal file
24
apps/web-antd/src/views/system/user/modal.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
onCancel() {
|
||||
modalApi.close();
|
||||
},
|
||||
onConfirm() {
|
||||
message.success('点击了确认');
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal
|
||||
class="w-[600px]"
|
||||
title="基础弹窗示例"
|
||||
title-tooltip="标题提示内容"
|
||||
>
|
||||
aaaaa
|
||||
</BasicModal>
|
||||
</template>
|
||||
@ -178,7 +178,7 @@ importers:
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/utils
|
||||
'@vueuse/core':
|
||||
specifier: ^11.0.0
|
||||
specifier: ^11.0.1
|
||||
version: 11.0.1(vue@3.4.38(typescript@5.5.4))
|
||||
ant-design-vue:
|
||||
specifier: ^4.2.3
|
||||
@ -189,6 +189,15 @@ importers:
|
||||
dayjs:
|
||||
specifier: ^1.11.13
|
||||
version: 1.11.13
|
||||
echarts:
|
||||
specifier: ^5.5.1
|
||||
version: 5.5.1
|
||||
jsencrypt:
|
||||
specifier: ^3.3.2
|
||||
version: 3.3.2
|
||||
lodash-es:
|
||||
specifier: ^4.17.21
|
||||
version: 4.17.21
|
||||
pinia:
|
||||
specifier: 2.2.2
|
||||
version: 2.2.2(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4))
|
||||
@ -210,7 +219,7 @@ importers:
|
||||
version: 4.17.12
|
||||
unplugin-vue-components:
|
||||
specifier: ^0.27.3
|
||||
version: 0.27.4(@babel/parser@7.25.3)(rollup@4.21.0)(vue@3.4.38(typescript@5.5.4))
|
||||
version: 0.27.4(@babel/parser@7.25.4)(rollup@4.21.0)(vue@3.4.38(typescript@5.5.4))
|
||||
|
||||
apps/web-ele:
|
||||
dependencies:
|
||||
@ -257,7 +266,7 @@ importers:
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/utils
|
||||
'@vueuse/core':
|
||||
specifier: ^11.0.0
|
||||
specifier: ^11.0.1
|
||||
version: 11.0.1(vue@3.4.38(typescript@5.5.4))
|
||||
dayjs:
|
||||
specifier: ^1.11.13
|
||||
@ -324,7 +333,7 @@ importers:
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/utils
|
||||
'@vueuse/core':
|
||||
specifier: ^11.0.0
|
||||
specifier: ^11.0.1
|
||||
version: 11.0.1(vue@3.4.38(typescript@5.5.4))
|
||||
naive-ui:
|
||||
specifier: ^2.39.0
|
||||
@ -398,10 +407,10 @@ importers:
|
||||
specifier: ^9.6.0
|
||||
version: 9.6.0
|
||||
'@typescript-eslint/eslint-plugin':
|
||||
specifier: ^8.1.0
|
||||
specifier: ^8.2.0
|
||||
version: 8.2.0(@typescript-eslint/parser@8.2.0(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4))(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4)
|
||||
'@typescript-eslint/parser':
|
||||
specifier: ^8.1.0
|
||||
specifier: ^8.2.0
|
||||
version: 8.2.0(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4)
|
||||
eslint:
|
||||
specifier: ^9.9.0
|
||||
@ -467,7 +476,7 @@ importers:
|
||||
internal/lint-configs/stylelint-config:
|
||||
dependencies:
|
||||
'@stylistic/stylelint-plugin':
|
||||
specifier: ^3.0.0
|
||||
specifier: ^3.0.1
|
||||
version: 3.0.1(stylelint@16.8.2(typescript@5.5.4))
|
||||
stylelint-config-recess-order:
|
||||
specifier: ^5.1.0
|
||||
@ -583,7 +592,7 @@ importers:
|
||||
specifier: ^16.1.0
|
||||
version: 16.1.0(postcss@8.4.41)
|
||||
postcss-preset-env:
|
||||
specifier: ^10.0.1
|
||||
specifier: ^10.0.2
|
||||
version: 10.0.2(postcss@8.4.41)
|
||||
tailwindcss:
|
||||
specifier: ^3.4.10
|
||||
@ -660,7 +669,7 @@ importers:
|
||||
specifier: ^16.4.5
|
||||
version: 16.4.5
|
||||
rollup:
|
||||
specifier: ^4.20.0
|
||||
specifier: ^4.21.0
|
||||
version: 4.21.0
|
||||
rollup-plugin-visualizer:
|
||||
specifier: ^5.12.0
|
||||
@ -747,7 +756,7 @@ importers:
|
||||
specifier: workspace:*
|
||||
version: link:../base/shared
|
||||
'@vueuse/core':
|
||||
specifier: ^11.0.0
|
||||
specifier: ^11.0.1
|
||||
version: 11.0.1(vue@3.4.38(typescript@5.5.4))
|
||||
radix-vue:
|
||||
specifier: ^1.9.4
|
||||
@ -772,7 +781,7 @@ importers:
|
||||
specifier: workspace:*
|
||||
version: link:../base/typings
|
||||
'@vueuse/core':
|
||||
specifier: ^11.0.0
|
||||
specifier: ^11.0.1
|
||||
version: 11.0.1(vue@3.4.38(typescript@5.5.4))
|
||||
vue:
|
||||
specifier: 3.4.38
|
||||
@ -793,7 +802,7 @@ importers:
|
||||
specifier: workspace:*
|
||||
version: link:../../base/typings
|
||||
'@vueuse/core':
|
||||
specifier: ^11.0.0
|
||||
specifier: ^11.0.1
|
||||
version: 11.0.1(vue@3.4.38(typescript@5.5.4))
|
||||
vue:
|
||||
specifier: 3.4.38
|
||||
@ -817,7 +826,7 @@ importers:
|
||||
specifier: workspace:*
|
||||
version: link:../../base/typings
|
||||
'@vueuse/core':
|
||||
specifier: ^11.0.0
|
||||
specifier: ^11.0.1
|
||||
version: 11.0.1(vue@3.4.38(typescript@5.5.4))
|
||||
vue:
|
||||
specifier: 3.4.38
|
||||
@ -859,7 +868,7 @@ importers:
|
||||
specifier: workspace:*
|
||||
version: link:../../base/typings
|
||||
'@vueuse/core':
|
||||
specifier: ^11.0.0
|
||||
specifier: ^11.0.1
|
||||
version: 11.0.1(vue@3.4.38(typescript@5.5.4))
|
||||
class-variance-authority:
|
||||
specifier: ^0.7.0
|
||||
@ -889,7 +898,7 @@ importers:
|
||||
specifier: workspace:*
|
||||
version: link:../../base/typings
|
||||
'@vueuse/core':
|
||||
specifier: ^11.0.0
|
||||
specifier: ^11.0.1
|
||||
version: 11.0.1(vue@3.4.38(typescript@5.5.4))
|
||||
vue:
|
||||
specifier: 3.4.38
|
||||
@ -925,7 +934,7 @@ importers:
|
||||
specifier: workspace:*
|
||||
version: link:../../preferences
|
||||
'@vueuse/core':
|
||||
specifier: ^11.0.0
|
||||
specifier: ^11.0.1
|
||||
version: 11.0.1(vue@3.4.38(typescript@5.5.4))
|
||||
echarts:
|
||||
specifier: ^5.5.1
|
||||
@ -958,13 +967,8 @@ importers:
|
||||
specifier: workspace:*
|
||||
version: link:../../types
|
||||
'@vueuse/integrations':
|
||||
<<<<<<< HEAD
|
||||
specifier: ^11.0.0
|
||||
version: 11.0.1(async-validator@4.2.5)(axios@1.7.4)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))
|
||||
=======
|
||||
specifier: ^11.0.1
|
||||
version: 11.0.1(async-validator@4.2.5)(axios@1.7.5)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))
|
||||
>>>>>>> edb55b1fc09bad76d1c10918248fdb6836f30ddb
|
||||
qrcode:
|
||||
specifier: ^1.5.4
|
||||
version: 1.5.4
|
||||
@ -1048,7 +1052,7 @@ importers:
|
||||
specifier: workspace:*
|
||||
version: link:../../utils
|
||||
'@vueuse/core':
|
||||
specifier: ^11.0.0
|
||||
specifier: ^11.0.1
|
||||
version: 11.0.1(vue@3.4.38(typescript@5.5.4))
|
||||
vue:
|
||||
specifier: 3.4.38
|
||||
@ -1196,7 +1200,7 @@ importers:
|
||||
specifier: workspace:*
|
||||
version: link:../packages/utils
|
||||
'@vueuse/core':
|
||||
specifier: ^11.0.0
|
||||
specifier: ^11.0.1
|
||||
version: 11.0.1(vue@3.4.38(typescript@5.5.4))
|
||||
ant-design-vue:
|
||||
specifier: ^4.2.3
|
||||
@ -12844,7 +12848,7 @@ snapshots:
|
||||
'@types/fs-extra@11.0.4':
|
||||
dependencies:
|
||||
'@types/jsonfile': 6.1.4
|
||||
'@types/node': 22.4.1
|
||||
'@types/node': 22.5.0
|
||||
|
||||
'@types/hast@3.0.4':
|
||||
dependencies:
|
||||
@ -12866,7 +12870,7 @@ snapshots:
|
||||
|
||||
'@types/jsonfile@6.1.4':
|
||||
dependencies:
|
||||
'@types/node': 22.4.1
|
||||
'@types/node': 22.5.0
|
||||
|
||||
'@types/jsonwebtoken@9.0.6':
|
||||
dependencies:
|
||||
@ -13310,27 +13314,7 @@ snapshots:
|
||||
- '@vue/composition-api'
|
||||
- vue
|
||||
|
||||
<<<<<<< HEAD
|
||||
'@vueuse/integrations@11.0.1(async-validator@4.2.5)(axios@1.7.4)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))':
|
||||
=======
|
||||
'@vueuse/integrations@11.0.0(async-validator@4.2.5)(axios@1.7.5)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))':
|
||||
dependencies:
|
||||
'@vueuse/core': 11.0.0(vue@3.4.38(typescript@5.5.4))
|
||||
'@vueuse/shared': 11.0.0(vue@3.4.38(typescript@5.5.4))
|
||||
vue-demi: 0.14.10(vue@3.4.38(typescript@5.5.4))
|
||||
optionalDependencies:
|
||||
async-validator: 4.2.5
|
||||
axios: 1.7.5
|
||||
focus-trap: 7.5.4
|
||||
nprogress: 0.2.0
|
||||
qrcode: 1.5.4
|
||||
sortablejs: 1.15.2
|
||||
transitivePeerDependencies:
|
||||
- '@vue/composition-api'
|
||||
- vue
|
||||
|
||||
'@vueuse/integrations@11.0.1(async-validator@4.2.5)(axios@1.7.5)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))':
|
||||
>>>>>>> edb55b1fc09bad76d1c10918248fdb6836f30ddb
|
||||
dependencies:
|
||||
'@vueuse/core': 11.0.1(vue@3.4.38(typescript@5.5.4))
|
||||
'@vueuse/shared': 11.0.1(vue@3.4.38(typescript@5.5.4))
|
||||
@ -18857,7 +18841,7 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
|
||||
unplugin-vue-components@0.27.4(@babel/parser@7.25.3)(rollup@4.21.0)(vue@3.4.38(typescript@5.5.4)):
|
||||
unplugin-vue-components@0.27.4(@babel/parser@7.25.4)(rollup@4.21.0)(vue@3.4.38(typescript@5.5.4)):
|
||||
dependencies:
|
||||
'@antfu/utils': 0.7.10
|
||||
'@rollup/pluginutils': 5.1.0(rollup@4.21.0)
|
||||
@ -18871,7 +18855,7 @@ snapshots:
|
||||
unplugin: 1.12.2
|
||||
vue: 3.4.38(typescript@5.5.4)
|
||||
optionalDependencies:
|
||||
'@babel/parser': 7.25.3
|
||||
'@babel/parser': 7.25.4
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
- supports-color
|
||||
@ -19130,11 +19114,7 @@ snapshots:
|
||||
'@vue/devtools-api': 7.3.8
|
||||
'@vue/shared': 3.4.38
|
||||
'@vueuse/core': 11.0.1(vue@3.4.38(typescript@5.5.4))
|
||||
<<<<<<< HEAD
|
||||
'@vueuse/integrations': 11.0.1(async-validator@4.2.5)(axios@1.7.4)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))
|
||||
=======
|
||||
'@vueuse/integrations': 11.0.0(async-validator@4.2.5)(axios@1.7.5)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))
|
||||
>>>>>>> edb55b1fc09bad76d1c10918248fdb6836f30ddb
|
||||
'@vueuse/integrations': 11.0.1(async-validator@4.2.5)(axios@1.7.5)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))
|
||||
focus-trap: 7.5.4
|
||||
mark.js: 8.11.1
|
||||
minisearch: 7.1.0
|
||||
|
||||
Loading…
Reference in New Issue
Block a user