feat: popup component support overlay blur effect (#5359)

playground/src/views/examples/drawer/base-demo.vue

@@ -7,6 +7,9 @@ const [Drawer, drawerApi] = useVbenDrawer({
   onCancel() {
     drawerApi.close();
   },
+  onClosed() {
+    drawerApi.setState({ overlayBlur: 0, placement: 'right' });
+  },
   onConfirm() {
     message.info('onConfirm');
     // drawerApi.close();

playground/src/views/examples/drawer/index.vue

@@ -45,6 +45,10 @@ 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') {
@@ -124,6 +128,9 @@ function openFormDrawer() {
       <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="在内容区域打开">

playground/src/views/examples/modal/blur-demo.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Slider } from 'ant-design-vue';
+
+const blur = ref(5);
+const [Modal, modalApi] = useVbenModal({
+  overlayBlur: blur.value,
+});
+watch(blur, (val) => {
+  modalApi.setState({
+    overlayBlur: val,
+  });
+});
+</script>
+<template>
+  <Modal title="遮罩层模糊">
+    <p>调整滑块来改变遮罩层模糊程度：{{ blur }}</p>
+    <Slider v-model:value="blur" :max="30" :min="0" />
+  </Modal>
+</template>

playground/src/views/examples/modal/index.vue

@@ -6,6 +6,7 @@ import { Button, Card, Flex } from 'ant-design-vue';
 import DocButton from '../doc-button.vue';
 import AutoHeightDemo from './auto-height-demo.vue';
 import BaseDemo from './base-demo.vue';
+import BlurDemo from './blur-demo.vue';
 import DragDemo from './drag-demo.vue';
 import DynamicDemo from './dynamic-demo.vue';
 import FormModalDemo from './form-modal-demo.vue';
@@ -47,6 +48,10 @@ const [NestedModal, nestedModalApi] = useVbenModal({
   connectedComponent: NestedDemo,
 });
 
+const [BlurModal, blurModalApi] = useVbenModal({
+  connectedComponent: BlurDemo,
+});
+
 function openBaseModal() {
   baseModalApi.open();
 }
@@ -80,6 +85,10 @@ function openNestedModal() {
   nestedModalApi.open();
 }
 
+function openBlurModal() {
+  blurModalApi.open();
+}
+
 function handleUpdateTitle() {
   dynamicModalApi.setState({ title: '外部动态标题' }).open();
 }
@@ -111,6 +120,7 @@ function openFormModal() {
     <SharedDataModal />
     <FormModal />
     <NestedModal />
+    <BlurModal />
     <Flex wrap="wrap" class="w-full" gap="10">
       <Card class="w-[300px]" title="基本使用">
         <p>一个基础的弹窗示例</p>
@@ -176,6 +186,13 @@ function openFormModal() {
           <Button type="primary" @click="openNestedModal">打开嵌套弹窗</Button>
         </template>
       </Card>
+
+      <Card class="w-[300px]" title="遮罩模糊示例">
+        <p>遮罩层应用类似毛玻璃的模糊效果</p>
+        <template #actions>
+          <Button type="primary" @click="openBlurModal">打开弹窗</Button>
+        </template>
+      </Card>
     </Flex>
   </Page>
 </template>