diff --git a/packages/devui-vue/devui/button/src/button.tsx b/packages/devui-vue/devui/button/src/button.tsx
index 554a99b2a6..a132922eb4 100644
--- a/packages/devui-vue/devui/button/src/button.tsx
+++ b/packages/devui-vue/devui/button/src/button.tsx
@@ -1,11 +1,15 @@
 import { computed, defineComponent, ref } from 'vue';
 import { Icon } from '../../icon';
+import loadingDirective from '../../loading/src/directive';
 import { buttonProps } from './button-types';
 
 import './button.scss';
 
 export default defineComponent({
   name: 'DButton',
+  directives: {
+    devLoading: loadingDirective
+  },
   props: buttonProps,
   setup(props, ctx) {
     const buttonContent = ref<HTMLSpanElement | null>(null);
@@ -49,13 +53,17 @@ export default defineComponent({
         width
       } = props;
       return (
-        <div class="devui-btn-host" {...ctx.attrs} v-dLoading={showLoading}>
+        <div 
+          class="devui-btn-host" 
+          {...ctx.attrs} 
+        >
           <button
             class={btnClass.value}
             type={type}
             disabled={disabled}
             style={{ width }}
             onClick={onClick}
+            v-devLoading={showLoading}
           >
             {!!icon ? (
               <Icon name={icon} class={iconClass.value} />
diff --git a/packages/devui-vue/devui/modal/src/dialog-types.ts b/packages/devui-vue/devui/modal/src/dialog-types.ts
index dbae5c5eae..75c09d49c6 100644
--- a/packages/devui-vue/devui/modal/src/dialog-types.ts
+++ b/packages/devui-vue/devui/modal/src/dialog-types.ts
@@ -54,7 +54,7 @@ export const dialogProps = {
   },
   backdropCloseable: {
     type: Boolean,
-    default: false
+    default: true
   },
   bodyScrollable: {
     type: Boolean,
diff --git a/packages/devui-vue/devui/modal/src/modal-types.ts b/packages/devui-vue/devui/modal/src/modal-types.ts
index 897eae827a..cb3a269af9 100644
--- a/packages/devui-vue/devui/modal/src/modal-types.ts
+++ b/packages/devui-vue/devui/modal/src/modal-types.ts
@@ -42,7 +42,7 @@ export const modalProps = {
   },
   backdropCloseable: {
     type: Boolean,
-    default: false
+    default: true
   },
   bodyScrollable: {
     type: Boolean,
@@ -58,7 +58,7 @@ export const modalProps = {
     type: Function as PropType<() => void>,
   },
   beforeHidden: {
-    type: [Object, Function] as PropType<Promise<boolean> | (() => boolean| Promise<boolean>)>
+    type: [Object, Function] as PropType<Promise<boolean> | (() => boolean | Promise<boolean>)>
   },
 
   modelValue: {
diff --git a/packages/devui-vue/devui/modal/src/modal.tsx b/packages/devui-vue/devui/modal/src/modal.tsx
index 82002416f2..3545007fe4 100644
--- a/packages/devui-vue/devui/modal/src/modal.tsx
+++ b/packages/devui-vue/devui/modal/src/modal.tsx
@@ -2,7 +2,6 @@ import {
   computed,
   defineComponent,
   Transition,
-  watch
 } from 'vue'
 import { modalProps, ModalProps } from './modal-types'
 import { FixedOverlay } from '../../overlay'