diff --git a/packages/canvas/render/src/RenderMain.js b/packages/canvas/render/src/RenderMain.js
index 190287bfb..177a4b4e0 100644
--- a/packages/canvas/render/src/RenderMain.js
+++ b/packages/canvas/render/src/RenderMain.js
@@ -24,6 +24,7 @@ import {
   setContext,
   getContext,
   setCondition,
+  getCondition,
   context,
   setNode
 } from './context'
@@ -440,6 +441,7 @@ export const api = {
   getRoot,
   setPagecss,
   setCondition,
+  getCondition,
   getGlobalState,
   getDataSourceMap,
   setDataSourceMap,
diff --git a/packages/canvas/render/src/context.js b/packages/canvas/render/src/context.js
index 96b8ca673..e6f430088 100644
--- a/packages/canvas/render/src/context.js
+++ b/packages/canvas/render/src/context.js
@@ -51,3 +51,5 @@ export const getContext = () => context
 export const setCondition = (id, visible = false) => {
   conditions[id] = visible
 }
+
+export const getCondition = () => conditions
\ No newline at end of file
diff --git a/packages/settings/events/src/components/BindEventsDialog.vue b/packages/settings/events/src/components/BindEventsDialog.vue
index 7f1ef0d52..5d56735fd 100644
--- a/packages/settings/events/src/components/BindEventsDialog.vue
+++ b/packages/settings/events/src/components/BindEventsDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <tiny-dialog-box
-    v-show="dialogVisible"
+    :visible="dialogVisible"
     title="事件绑定"
     width="50%"
     :append-to-body="true"
@@ -8,7 +8,7 @@
     @opened="openedDialog"
   >
     <div class="bind-event-dialog-content">
-      <component :is="BindEventsDialogSidebar" :eventBinding="eventBinding"></component>
+      <component :is="BindEventsDialogSidebar" :dialogVisible="dialogVisible" :eventBinding="eventBinding"></component>
       <component :is="BindEventsDialogContent" :dialogVisible="dialogVisible"></component>
     </div>
     <template #footer>
@@ -27,6 +27,7 @@ import {
   useCanvas,
   useHistory,
   useLayout,
+  getOptions,
   getMetaApi,
   META_APP
 } from '@opentiny/tiny-engine-meta-register'
@@ -167,7 +168,7 @@ export default {
       })
     }
 
-    const confirm = () => {
+    const confirm = async () => {
       if (state.tipError) {
         return
       }
@@ -189,13 +190,20 @@ export default {
 
       // 需要在bindMethod之后
       const functionBody = getFunctionBody()
-
-      saveMethod?.({
-        name: state.bindMethodInfo.name,
+      const { name } = state.bindMethodInfo
+      const method = {
+        name,
         content: state.enableExtraParams
-          ? `function ${state.bindMethodInfo.name}(eventArgs,${formatParams}) ${functionBody}`
-          : `function ${state.bindMethodInfo.name}(${formatParams})  ${functionBody}`
-      })
+          ? `function ${name}(eventArgs,${formatParams}) ${functionBody}`
+          : `function ${name}(${formatParams})  ${functionBody}`
+      }
+      const { beforeSaveMethod } = getOptions(meta.id)
+
+      if (typeof beforeSaveMethod === 'function') {
+        await beforeSaveMethod(method, state.bindMethodInfo)
+      }
+
+      saveMethod?.(method)
 
       activePagePlugin()
       close()
diff --git a/packages/toolbars/preview/src/Main.vue b/packages/toolbars/preview/src/Main.vue
index 533e16a67..a8d3420ff 100644
--- a/packages/toolbars/preview/src/Main.vue
+++ b/packages/toolbars/preview/src/Main.vue
@@ -18,7 +18,8 @@
 import { Popover } from '@opentiny/vue'
 import { previewPage, previewBlock } from '@opentiny/tiny-engine-common/js/preview'
 import { useBlock, useCanvas, useLayout, useNotify } from '@opentiny/tiny-engine-meta-register'
-import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
+import { getMergeMeta, getOptions } from '@opentiny/tiny-engine-meta-register'
+import meta from '../meta'
 
 export default {
   components: {
@@ -34,7 +35,21 @@ export default {
     const { isBlock, getCurrentPage, canvasApi } = useCanvas()
     const { getCurrentBlock } = useBlock()
 
-    const preview = () => {
+    const preview = async () => {
+      const { beforePreview, previewMethod, afterPreview } = getOptions(meta.id)
+
+      if (typeof beforePreview === 'function') {
+        await beforePreview()
+      }
+      
+      if (typeof previewMethod === 'function') {
+        const stop = await previewMethod()
+
+        if(stop) {
+          return
+        }
+      }
+
       if (useLayout().isEmptyPage()) {
         useNotify({
           type: 'warning',
@@ -63,6 +78,10 @@ export default {
         params.pageInfo.name = page?.name
         previewPage(params)
       }
+
+      if (typeof afterPreview === 'function') {
+        await afterPreview()
+      }
     }
 
     return {
diff --git a/packages/toolbars/save/src/Main.vue b/packages/toolbars/save/src/Main.vue
index ef62621d5..91d881a90 100644
--- a/packages/toolbars/save/src/Main.vue
+++ b/packages/toolbars/save/src/Main.vue
@@ -54,8 +54,10 @@
 import { reactive, ref, onUnmounted } from 'vue'
 import { VueMonaco } from '@opentiny/tiny-engine-common'
 import { Button, Popover, DialogBox, Checkbox, Select } from '@opentiny/vue'
+import { getOptions } from '@opentiny/tiny-engine-meta-register'
 import { openCommon, saveCommon } from './js/index'
 import { isLoading } from './js/index'
+import meta from '../meta'
 export const api = {
   saveCommon,
   openCommon
@@ -102,9 +104,29 @@ export default {
       state.visible = false
       state.originalCode = ''
     }
-    const openApi = () => {
-      if (!isLoading.value) {
-        openCommon()
+    const openApi = async () => {
+      if (isLoading.value) {
+        return
+      }
+
+      const { beforeSave, saveMethod, saved } = getOptions(meta.id)
+
+      if (typeof beforeSave === 'function') {
+        await beforeSave()
+      }
+
+      let stop = false
+
+      if (typeof saveMethod === 'function') {
+        stop = await saveMethod()
+      }
+
+      if (!stop) {
+        await openCommon()
+      }
+
+      if (typeof saved === 'function') {
+        await saved()
       }
     }
     const saveApi = () => {
diff --git a/packages/toolbars/save/src/js/index.js b/packages/toolbars/save/src/js/index.js
index 7b951656b..7429661c5 100644
--- a/packages/toolbars/save/src/js/index.js
+++ b/packages/toolbars/save/src/js/index.js
@@ -17,11 +17,13 @@ import {
   useLayout,
   useNotify,
   usePage,
+  getOptions,
   getMetaApi,
   META_APP
 } from '@opentiny/tiny-engine-meta-register'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { handlePageUpdate } from '@opentiny/tiny-engine-common/js/http'
+import meta from '../../meta'
 
 const { PAGE_STATUS } = constants
 const state = reactive({
@@ -95,6 +97,22 @@ export const openCommon = async () => {
     return
   }
 
+  const { beforeSave, saveMethod, saved } = getOptions(meta.id)
+
+  if (typeof beforeSave === 'function') {
+    await beforeSave()
+  }
+
+  let stop = false
+
+  if (typeof saveMethod === 'function') {
+    stop = await saveMethod()
+  }
+
+  if (!stop) {
+    await openCommon()
+  }
+
   const pageStatus = useLayout().layoutState?.pageStatus
   const curPageState = pageStatus?.state
   const pageInfo = pageStatus?.data
@@ -138,5 +156,9 @@ export const openCommon = async () => {
 
   saveCommon(state.code).finally(() => {
     state.disabled = false
+
+    if (typeof saved === 'function') {
+      saved()
+    }
   })
 }