diff --git a/packages/varlet-cli/site/site.config.json b/packages/varlet-cli/site/site.config.json
index e90dca955d6..d21d17711d9 100644
--- a/packages/varlet-cli/site/site.config.json
+++ b/packages/varlet-cli/site/site.config.json
@@ -78,6 +78,13 @@
         },
         "doc": "menu"
       },
+      {
+        "text": {
+          "zh-CN": "Dialog 对话框",
+          "en-US": "Dialog"
+        },
+        "doc": "dialog"
+      },
       {
         "text": {
           "zh-CN": "Loading 加载",
@@ -155,13 +162,6 @@
         },
         "doc": "lazy"
       },
-      {
-        "text": {
-          "zh-CN": "Dialog 对话框",
-          "en-US": "Dialog"
-        },
-        "doc": "dialog"
-      },
       {
         "text": {
           "zh-CN": "Image 图片",
diff --git a/packages/varlet-cli/src/compiler/compileScript.ts b/packages/varlet-cli/src/compiler/compileScript.ts
index ad8eab3e60c..74735d8fe7b 100644
--- a/packages/varlet-cli/src/compiler/compileScript.ts
+++ b/packages/varlet-cli/src/compiler/compileScript.ts
@@ -74,6 +74,7 @@ function install(app) {
 `
   const esExports = `\
 export {
+  install,
   ${exportDirNames.map((exportDirName: string) => `${bigCamelize(exportDirName)}`).join(',\n  ')}
 }
 
diff --git a/packages/varlet-cli/src/compiler/compileTemplateHighlight.ts b/packages/varlet-cli/src/compiler/compileTemplateHighlight.ts
index 442cf13c58d..742268a5c3c 100644
--- a/packages/varlet-cli/src/compiler/compileTemplateHighlight.ts
+++ b/packages/varlet-cli/src/compiler/compileTemplateHighlight.ts
@@ -20,6 +20,14 @@ import { varletConfig } from '../config/varlet.config'
 const TABLE_HEAD_RE = /\s*\|.*\|\s*\n\s*\|.*---+\s*\|\s*\n+/
 const TABLE_FOOT_RE = /(\|\s*$)|(\|\s*\n(?!\s*\|))/
 
+export function replaceDot(str: string) {
+  return str.replace(/`/g, '')
+}
+
+export function replaceUnderline(str: string) {
+  return str.replace(/_/g, '')
+}
+
 export function parseTable(table: string) {
   const rows = table.split('\n').filter(Boolean)
   return rows.map((row) => {
@@ -59,17 +67,17 @@ export function compileTable(md: string, titleRe: RegExp): string {
 }
 
 export function compileTags(table: Record<string, any>, tags: Record<string, any>, componentName: string) {
-  tags[componentName] = {
-    attributes: table.attributesTable.map((row: any) => row[0].replace(/`/g, '')),
+  tags[`${get(varletConfig, 'namespace')}-${componentName}`] = {
+    attributes: table.attributesTable.map((row: any) => replaceDot(row[0])),
   }
 }
 
 export function compileAttributes(table: Record<string, any>, attributes: Record<string, any>, componentName: string) {
   table.attributesTable.forEach((row: any) => {
-    const attrNamespace = `${get(varletConfig, 'namespace')}-${componentName}/${row[0]}`
+    const attrNamespace = `${get(varletConfig, 'namespace')}-${componentName}/${replaceDot(row[0])}`
     attributes[attrNamespace] = {
-      type: row[2].replace(/_/g, ''),
-      description: `${row[1]} 默认值：${row[3].replace(/`/g, '')}`,
+      type: replaceUnderline(row[2]),
+      description: `${row[1]} 默认值：${replaceDot(row[3])}`,
     }
   })
 }
@@ -78,22 +86,22 @@ export function compileWebTypes(table: Record<string, any>, webTypes: Record<str
   const { attributesTable, eventsTable, slotsTable } = table
 
   const attributes = attributesTable.map((row: any) => ({
-    name: row[0].replace(/`/g, ''),
+    name: replaceDot(row[0]),
     description: row[1],
-    default: row[3].replace(/`/g, ''),
+    default: replaceDot(row[3]),
     value: {
-      type: row[2].replace(/_/g, ''),
+      type: replaceUnderline(row[2]),
       kind: 'expression',
     },
   }))
 
   const events = eventsTable.map((row: any) => ({
-    name: row[0].replace(/`/g, ''),
+    name: replaceDot(row[0]),
     description: row[1],
   }))
 
   const slots = slotsTable.map((row: any) => ({
-    name: row[0].replace(/`/g, ''),
+    name: replaceDot(row[0]),
     description: row[1],
   }))
 
diff --git a/packages/varlet-cli/src/shared/constant.ts b/packages/varlet-cli/src/shared/constant.ts
index 22d3c5fbd24..aca983f8d84 100644
--- a/packages/varlet-cli/src/shared/constant.ts
+++ b/packages/varlet-cli/src/shared/constant.ts
@@ -33,7 +33,7 @@ export const HL_TITLE_EVENTS_RE = /###\s*事件\s*\n+/
 export const HL_TITLE_SLOTS_RE = /###\s*插槽\s*\n+/
 export const HL_MD = 'zh-CN.md'
 export const HL_DIR = resolve(CWD, 'highlight')
-export const HL_TAGS_JSON = resolve(HL_DIR, 'tag.json')
+export const HL_TAGS_JSON = resolve(HL_DIR, 'tags.json')
 export const HL_ATTRIBUTES_JSON = resolve(HL_DIR, 'attributes.json')
 export const HL_WEB_TYPES_JSON = resolve(HL_DIR, 'web-types.json')
 
diff --git a/packages/varlet-ui/src/cell/Cell.vue b/packages/varlet-ui/src/cell/Cell.vue
index f8aa201f11b..3944458edf3 100644
--- a/packages/varlet-ui/src/cell/Cell.vue
+++ b/packages/varlet-ui/src/cell/Cell.vue
@@ -2,7 +2,7 @@
   <div class="var-cell" :class="[border ? 'var-cell--border' : null]">
     <div class="var-cell__icon" :class="[iconClass ? iconClass : null]" v-if="$slots.icon || icon">
       <slot name="icon">
-        <var-icon :name="icon" />
+        <var-icon class="var--flex" :name="icon" />
       </slot>
     </div>
     <div class="var-cell__content">
diff --git a/packages/varlet-ui/src/dialog/Dialog.vue b/packages/varlet-ui/src/dialog/Dialog.vue
index 4969e82fd0c..a143fb0eb41 100644
--- a/packages/varlet-ui/src/dialog/Dialog.vue
+++ b/packages/varlet-ui/src/dialog/Dialog.vue
@@ -4,6 +4,7 @@
     v-model:show="popupShow"
     :overlay="overlay"
     :overlay-class="overlayClass"
+    :overlay-style="overlayStyle"
     :lock-scroll="lockScroll"
     :close-on-click-overlay="popupCloseOnClickOverlay"
     :teleport="teleport"
@@ -20,9 +21,7 @@
       </div>
       <div
         class="var-dialog__message"
-        :style="{
-          'text-align': messageAlign,
-        }"
+        :style="{ textAlign: messageAlign }"
       >
         <slot>
           {{ message }}
@@ -31,9 +30,9 @@
       <div class="var-dialog__actions">
         <var-button
           class="var-dialog__button var-dialog__cancel-button"
-          plain
+          text
+          :text-color="cancelButtonTextColor"
           :color="cancelButtonColor"
-          :background="cancelButtonBackground"
           v-if="cancelButton"
           @click="cancel"
         >
@@ -41,9 +40,9 @@
         </var-button>
         <var-button
           class="var-dialog__button var-dialog__confirm-button"
-          plain
+          text
+          :text-color="confirmButtonTextColor"
           :color="confirmButtonColor"
-          :background="confirmButtonBackground"
           v-if="confirmButton"
           @click="confirm"
         >
@@ -71,68 +70,78 @@ export default defineComponent({
   inheritAttrs: false,
   props,
   setup(props) {
-    // 需要透传到popup组件里并需要特殊处理的参数
     const popupShow: Ref<boolean> = ref(false)
     const popupCloseOnClickOverlay: Ref<boolean> = ref(false)
 
-    watch(
-      () => props.show,
-      (newValue) => {
-        popupShow.value = newValue
-      },
-      { immediate: true }
-    )
-    watch(
-      () => props.closeOnClickOverlay,
-      (newValue) => {
-        if (props.onBeforeClose) {
-          // 异步关闭情况下 禁止点击弹出层关闭
-          popupCloseOnClickOverlay.value = false
-          return
-        }
-        popupCloseOnClickOverlay.value = newValue
-      },
-      { immediate: true }
-    )
-
-    // 异步关闭回调
     const done = () => props['onUpdate:show']?.(false)
 
     const handleClickOverlay = () => {
-      props.onClickOverlay?.()
-      if (props.closeOnClickOverlay === false) {
+      const { closeOnClickOverlay, onClickOverlay, onBeforeClose } = props
+
+      onClickOverlay?.()
+
+      if (!closeOnClickOverlay) {
         return
       }
-      if (props.onBeforeClose) {
-        props.onBeforeClose(done)
+
+      if (onBeforeClose != null) {
+        onBeforeClose('close', done)
         return
       }
+
       props['onUpdate:show']?.(false)
     }
 
     const confirm = () => {
-      props.onConfirm?.()
-      if (props.beforeClose) {
-        props.onBeforeClose(done)
+      const { onBeforeClose, onConfirm } = props
+
+      onConfirm?.()
+
+      if (onBeforeClose != null) {
+        onBeforeClose('confirm', done)
         return
       }
+
       props['onUpdate:show']?.(false)
     }
 
     const cancel = () => {
-      props.onCancel?.()
-      if (props.onBeforeClose) {
-        props.onBeforeClose(done)
+      const { onBeforeClose, onCancel } = props
+
+      onCancel?.()
+
+      if (onBeforeClose != null) {
+        onBeforeClose('cancel', done)
         return
       }
+
       props['onUpdate:show']?.(false)
     }
 
+    watch(
+      () => props.show,
+      (newValue) => { popupShow.value = newValue} ,
+      { immediate: true }
+    )
+
+    watch(
+      () => props.closeOnClickOverlay,
+      (newValue) => {
+        if (props.onBeforeClose != null) {
+          popupCloseOnClickOverlay.value = false
+          return
+        }
+
+        popupCloseOnClickOverlay.value = newValue
+      },
+      { immediate: true }
+    )
+
     return {
-      popupShow,
-      popupCloseOnClickOverlay,
       pack,
       dt,
+      popupShow,
+      popupCloseOnClickOverlay,
       handleClickOverlay,
       confirm,
       cancel,
diff --git a/packages/varlet-ui/src/dialog/dialog.less b/packages/varlet-ui/src/dialog/dialog.less
index 8685f6c9997..5f077b8df07 100644
--- a/packages/varlet-ui/src/dialog/dialog.less
+++ b/packages/varlet-ui/src/dialog/dialog.less
@@ -4,10 +4,8 @@
 @dialog-padding: 20px;
 @dialog-border-radius: 2px;
 @dialog-message-color: #888;
-
 @dialog-message-padding: 12px 0;
 @dialog-message-line-height: 24px;
-
 @dialog-button-margin-left: 6px;
 @dialog-confirm-button-color: @color-primary;
 @dialog-cancel-button-color: @color-primary;
diff --git a/packages/varlet-ui/src/dialog/docs/zh-CN.md b/packages/varlet-ui/src/dialog/docs/zh-CN.md
index e69de29bb2d..f35e171cf0e 100644
--- a/packages/varlet-ui/src/dialog/docs/zh-CN.md
+++ b/packages/varlet-ui/src/dialog/docs/zh-CN.md
@@ -0,0 +1,279 @@
+# 对话框
+
+### 介绍
+```html
+弹出一个对话框展示内容并处理用户交互。
+Dialog提供了函数式和组件式两种使用方式, 两种使用效果和参数并没有本质区别。
+```
+
+### 引入
+
+```js
+import { createApp } from 'vue';
+import { Dialog } from '@varlet/ui';
+
+createApp().use(Dialog)
+```
+
+### 函数调用
+#### 基本使用
+
+```js
+Dialog('兰亭临帖 行书如行云流水')
+```
+
+#### 修改标题
+
+```js
+Dialog({
+  title: '兰亭序',
+  message: '兰亭临帖 行书如行云流水',
+})
+```
+
+#### 隐藏按钮
+
+```js
+Dialog({
+  message: '兰亭临帖 行书如行云流水',
+  confirmButton: false,
+  cancelButton: false,
+})
+```
+
+#### 处理用户行为
+
+```html
+可以通过Dialog方法的返回值获取用户行为, 返回值是一个promise。
+包含confirm(确认), cancel(取消), close(通过点击遮罩层触发关闭)三种状态。
+```
+
+```js
+import { Snackbar } from '@varlet/ui'
+
+const actions = {
+  confirm: () => Snackbar.success('confirm'),
+  cancel: () => Snackbar.error('cancel'),
+  close: () => Snackbar.info('close'),
+}
+
+actions[await Dialog('兰亭临帖 行书如行云流水')]()
+```
+
+### 异步关闭
+
+```html
+Dialog可以通过onBeforeClose进行关闭前的拦截, 可以从参数中得到用户行为和触发关闭的回调函数。
+```
+
+```js
+import { Snackbar } from '@varlet/ui'
+
+const actions = {
+  confirm: () => Snackbar.success('confirm'),
+  cancel: () => Snackbar.error('cancel'),
+  close: () => Snackbar.info('close'),
+}
+
+const onBeforeClose = (action, done) => {
+  Snackbar.loading('正在异步关闭')
+  
+  setTimeout(() => {
+    actions[action]()
+    done()
+  }, 1000)
+}
+
+Dialog({
+  message: '兰亭临帖 行书如行云流水',
+  onBeforeClose
+})
+```
+
+### 组件调用
+
+#### 基本使用
+
+```html
+<var-button block @click="show = true">基本使用</var-button>
+<var-dialog
+  title="兰亭序"
+  message="兰亭临帖 行书如行云流水"
+  v-model:show="show"
+  @confirm="() => Snackbar.success('confirm')"
+  @cancel="() => Snackbar.error('cancel')"
+  @closed="() => Snackbar.info('closed')"
+/>
+```
+
+```js
+import { Snackbar } from '@varlet/ui'
+
+export default {
+  setup() {
+    const show = ref(false)
+
+    return {
+      show,
+      Snackbar,
+    }
+  }
+}
+```
+
+#### 异步关闭
+
+```html
+<var-button block @click="show = true">异步关闭</var-button>
+<var-dialog
+  title="兰亭序"
+  message="兰亭临帖 行书如行云流水"
+  v-model:show="show"
+  @before-close="onBeforeClose"
+/>
+```
+
+```js
+import { Snackbar } from '@varlet/ui'
+
+const actions = {
+  confirm: () => Snackbar.success('confirm'),
+  cancel: () => Snackbar.error('cancel'),
+  close: () => Snackbar.info('close'),
+}
+
+export default {
+  setup() {
+    const show = ref(false)
+
+    const onBeforeClose = (action, done) => {
+      Snackbar.loading('正在异步关闭')
+
+      setTimeout(() => {
+        actions[action]()
+        done()
+      }, 1000)
+    }
+
+    return {
+      show,
+      Snackbar,
+      onBeforeClose,
+    }
+  }
+}
+```
+
+#### 自定义插槽
+
+```html
+<var-button block @click="show = true">自定义插槽</var-button>
+<var-dialog v-model:show="show">
+  <template #title>
+    <var-icon name="information" color="#2979ff" />
+  </template>
+
+  <var-cell>兰亭临帖 行书如行云流水</var-cell>
+  <var-cell>兰亭临帖 行书如行云流水</var-cell>
+  <var-cell>兰亭临帖 行书如行云流水</var-cell>
+</var-dialog>
+```
+
+```js
+export default {
+  setup() {
+    const show = ref(false)
+
+    return { show }
+  }
+}
+```
+
+## API
+
+### 属性
+
+| 参数 | 说明 | 类型 | 默认值 | 
+| --- | --- | --- | --- | 
+| `v-model:show` | 是否显示对话框 | _boolean_ | `false` |
+| `title` | 对话框标题 | _string_ | `提示` |
+| `message` | 对话框内容 | _string_ | `-` |
+| `message-align` | 对话框内容文字对齐方式, 可选值 `center`, `left`, `right` | _string_ | `left` |
+| `confirm-button` | 是否显示确认按钮 | _boolean_ | `true` |
+| `cancel-button` | 是否显示取消按钮 | _boolean_ | `true` |
+| `confirm-button-text` | 确认按钮文字 | _string_ | `确认` |
+| `cancel-button-text` | 取消按钮文字 | _string_ | `取消` |
+| `confirm-button-text-color` | 确认按钮文字颜色 | _string_ | `-` |
+| `cancel-button-text-color` | 取消按钮文字颜色 | _string_ | `-` |
+| `confirm-button-color` | 确认按钮背景颜色 | _string_ | `-` |
+| `cancel-button-color` | 取消按钮背景颜色 | _string_ | `-` |
+| `overlay` | 是否显示遮罩层 | _boolean_ | `true` |  
+| `overlay-class` | 自定义遮罩层的class | _string_ | `-` |
+| `overlay-style` | 自定义遮罩层的style | _string_ | `-` |
+| `lock-scroll` | 是否禁止滚动穿透, 禁止时滚动弹出层不会引发body的滚动 | _boolean_ | `true` |
+| `close-on-click-overlay` | 是否点击遮罩层关闭弹出层 | _boolean_ | `true` | 
+| `teleport` | 弹出层挂载的位置 | _string_ | `body` |
+
+### 事件
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| `open` | 打开对话框时触发 | `-` |
+| `opened` | 打开对话框动画结束时触发 | `-` |
+| `before-close` | 对话框关闭前触发 会阻止关闭 | `action: confirm \| cancel \| close, done: Function` |
+| `close` | 关闭对话框时触发 | `-` |
+| `closed` | 关闭对话框动画结束时触发 | `-` |
+| `confirm` | 确认时触发 | `-` |
+| `cancel` | 取消时触发 | `-` |
+| `click-overlay` | 点击遮罩层时触发 | `-` |
+
+### Dialog Options
+#### 函数式调用时传入的选项
+| 参数 | 说明 | 类型 | 默认值 | 
+| --- | --- | --- | --- | 
+| `title` | 对话框标题 | _string_ | `提示` |
+| `message` | 对话框内容 | _string_ | `-` |
+| `messageAlign` | 对话框内容文字对齐方式, 可选值 `center`, `left`, `right` | _string_ | `left` |
+| `confirmButton` | 是否显示确认按钮 | _boolean_ | `true` |
+| `cancelButton` | 是否显示取消按钮 | _boolean_ | `true` |
+| `confirmButtonText` | 确认按钮文字 | _string_ | `确认` |
+| `cancelButtonText` | 取消按钮文字 | _string_ | `取消` |
+| `confirmButtonTextColor` | 确认按钮文字颜色 | _string_ | `-` |
+| `cancelButtonTextColor` | 取消按钮文字颜色 | _string_ | `-` |
+| `confirmButtonColor` | 确认按钮背景颜色 | _string_ | `-` |
+| `cancelButtonColor` | 取消按钮背景颜色 | _string_ | `-` |
+| `overlay` | 是否显示遮罩层 | _boolean_ | `true` |  
+| `overlayClass` | 自定义遮罩层的class | _string_ | `-` |
+| `overlayStyle` | 自定义遮罩层的style | _string_ | `-` |
+| `lockScroll` | 是否禁止滚动穿透, 禁止时滚动弹出层不会引发body的滚动 | _boolean_ | `true` |
+| `closeOnClickOverlay` | 是否点击遮罩层关闭弹出层 | _boolean_ | `true` |
+| `onOpen` | 对话框开启回调 | _() => void_ | `-` |
+| `onOpened` | 对话框开启动画结束回调 | _() => void_ | `-` |
+| `onBeforeClose` | 对话框关闭前回调 会阻止关闭 | _(action: confirm \| cancel \| close, done: Function) => void_ | `-` |
+| `onClose` | 对话框关闭回调 | _() => void_ | `-` |
+| `onClosed` | 对话框关闭动画结束回调 | _() => void_ | `-` |
+| `onConfirm` | 确认回调 | _() => void_ | `-` |
+| `onCancel` | 取消回调 | _() => void_ | `-` |
+| `onClickOverlay` | 遮罩层点击回调 | _() => void_ | `-` |
+
+### 插槽
+
+| 插槽名 | 说明 | 参数 |
+| --- | --- | --- |
+| `default` | 对话框主要内容 | `-` |
+| `title` | 对话框标题 | `-` |
+
+### 主题变量
+#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `@dialog-width` | `280px` |
+| `@dialog-padding` | `20px` |
+| `@dialog-border-radius` | `2px` |
+| `@dialog-message-color` | `#888` |
+| `@dialog-message-padding` | `12px 0` |
+| `@dialog-message-line-height` | `24px` |
+| `@dialog-button-margin-left` | `6px` |
+| `@dialog-confirm-button-color` | `@color-primary` |
+| `@dialog-cancel-button-color` | `@color-primary` |
\ No newline at end of file
diff --git a/packages/varlet-ui/src/dialog/example/index.vue b/packages/varlet-ui/src/dialog/example/index.vue
index a125e90df1f..815f91735b0 100644
--- a/packages/varlet-ui/src/dialog/example/index.vue
+++ b/packages/varlet-ui/src/dialog/example/index.vue
@@ -1,82 +1,130 @@
 <template>
-  <app-type>声明式调用</app-type>
-  <!--  <var-dialog-->
-  <!--    v-model:show="show"-->
-  <!--    title="哈哈哈"-->
-  <!--    message="测试声明式调用测试声明式调用测试声明式调用测试声明式调用测试声明式调用测试声明式调用测试声明式调用"-->
-  <!--    @confirm="() => log('confirm')"-->
-  <!--    @cancel="() => log('cancel')"-->
-  <!--    @open="() => log('open')"-->
-  <!--    @close="() => log('close')"-->
-  <!--    @opened="() => log('opened')"-->
-  <!--    @closed="() => log('closed')"-->
-  <!--    @click-overlay="() => log('click-overlay')"-->
-  <!--  />-->
-
-  <!--  <var-button type="success" size="large" @click="show = true">开启</var-button>-->
-  <var-button type="success" size="large" @click="create">命令开启</var-button>
+  <app-type>函数调用</app-type>
+  <var-button block @click="createBasic">基本使用</var-button>
+  <var-button block @click="modifyTitle">修改标题</var-button>
+  <var-button block @click="hideButton">隐藏按钮</var-button>
+  <var-button block @click="createAction">处理用户行为</var-button>
+  <var-button block @click="asyncClose">异步关闭</var-button>
+
+  <app-type>组件调用</app-type>
+  <var-button block @click="show = true">基本使用</var-button>
+  <var-dialog
+    v-model:show="show"
+    title="兰亭序"
+    message="兰亭临帖 行书如行云流水"
+    @confirm="() => Snackbar.success('confirm')"
+    @cancel="() => Snackbar.error('cancel')"
+    @closed="() => Snackbar.info('closed')"
+  />
+
+  <var-button block @click="show1 = true">异步关闭</var-button>
+  <var-dialog
+    v-model:show="show1"
+    title="兰亭序"
+    message="兰亭临帖 行书如行云流水"
+    @before-close="onBeforeClose"
+  />
+
+  <var-button block @click="show2 = true">自定义插槽</var-button>
+  <var-dialog v-model:show="show2">
+    <template #title>
+      <var-icon name="information" color="#2979ff" />
+    </template>
+
+    <var-cell>兰亭临帖 行书如行云流水</var-cell>
+    <var-cell>兰亭临帖 行书如行云流水</var-cell>
+    <var-cell>兰亭临帖 行书如行云流水</var-cell>
+  </var-dialog>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, Ref } from 'vue'
+<script>
 import Dialog from '..'
 import Button from '../../button'
+import Icon from '../../icon'
+import Snackbar from '../../snackbar'
+import Cell from '../../cell'
+import AppType from '@varlet/cli/site/mobile/components/AppType'
+import { ref } from 'vue'
 
-export default defineComponent({
+export default {
   name: 'DialogExample',
   components: {
     [Dialog.Component.name]: Dialog.Component,
     [Button.name]: Button,
+    [Icon.name]: Icon,
+    [Cell.name]: Cell,
+    AppType,
   },
   setup() {
-    const show: Ref<boolean> = ref(false)
+    const show = ref(false)
+    const show1 = ref(false)
+    const show2 = ref(false)
+    const value = ref('')
 
-    const handleBeforeClose = (done: () => void) => {
-      console.log('2秒关闭...')
-      setTimeout(() => {
-        done()
-      }, 2000)
+    const actions = {
+      confirm: () => Snackbar.success('confirm'),
+      cancel: () => Snackbar.error('cancel'),
+      close: () => Snackbar.info('close'),
     }
 
-    const log = (message: string) => console.log(message)
+    const createBasic = () => {
+      Dialog('兰亭临帖 行书如行云流水')
+    }
 
-    const create = async () => {
-      await Dialog({
-        title: '测试',
-        cancelButton: false,
-        message: '测试文字测试文字测试文字测试文字测试文字测试文字测试文字',
+    const createAction = async () => {
+      actions[await Dialog('兰亭临帖 行书如行云流水')]()
+    }
+
+    const modifyTitle = () => {
+      Dialog({
+        title: '兰亭序',
+        message: '兰亭临帖 行书如行云流水',
       })
-      await Dialog({
-        title: '测试2',
+    }
+
+    const hideButton = () => {
+      Dialog({
+        message: '兰亭临帖 行书如行云流水',
+        confirmButton: false,
         cancelButton: false,
-        message: '测试文字测试文字测试文字测试文字测试文字测试文字测试文字',
       })
+    }
+
+    const onBeforeClose = (action, done) => {
+      Snackbar.loading('正在异步关闭')
+
+      setTimeout(() => {
+        actions[action]()
+        done()
+      }, 1000)
+    }
 
-      // setTimeout(() => {
-      //   Dialog.close()
-      //
-      //   Dialog({
-      //     title: '测试123',
-      //     cancelButton: false,
-      //     message: '12312312',
-      //   })
-      // }, 2000)
-
-      // console.log(state)
+    const asyncClose = () => {
+      Dialog({
+        message: '兰亭临帖 行书如行云流水',
+        onBeforeClose
+      })
     }
 
     return {
       show,
-      log,
-      handleBeforeClose,
-      create,
+      show1,
+      show2,
+      value,
+      asyncClose,
+      createBasic,
+      createAction,
+      modifyTitle,
+      hideButton,
+      onBeforeClose,
+      Snackbar
     }
   },
-})
+}
 </script>
 
-<style scoped>
-.example {
-  background: antiquewhite;
+<style scoped lang="less">
+.var-button {
+  margin-top: 10px;
 }
 </style>
diff --git a/packages/varlet-ui/src/dialog/index.ts b/packages/varlet-ui/src/dialog/index.ts
index 0566eb6061a..06fd2138805 100644
--- a/packages/varlet-ui/src/dialog/index.ts
+++ b/packages/varlet-ui/src/dialog/index.ts
@@ -12,47 +12,52 @@ interface DialogOptions {
   cancelButton?: boolean
   confirmButtonText?: string
   cancelButtonText?: string
+  confirmButtonTextColor?: string
+  cancelButtonTextColor?: string
   confirmButtonColor?: string
   cancelButtonColor?: string
-  confirmButtonBackground?: string
-  cancelButtonBackground?: string
-  beforeClose?: (done: () => void) => void
   overlay?: boolean
   overlayClass?: string
+  overlayStyle?: Record<string, any>
   lockScroll?: boolean
   closeOnClickOverlay?: boolean
+  onOpen?: () => void
+  onOpened?: () => void
+  onBeforeClose?: (done: () => void) => void
+  onClose?: () => void
+  onClosed?: () => void
+  onConfirm?: () => void
+  onCancel?: () => void
+  onClickOverlay?: () => void
 }
 
-type DialogResolvedState = 'confirm' | 'cancel' | 'close' | 'exist'
-interface DialogResolvedData {
-  state: DialogResolvedState
-}
+type DialogActions = 'confirm' | 'cancel' | 'close'
 
 let singletonOptions: DialogOptions | null
 
-function Dialog(options: DialogOptions | string): Promise<DialogResolvedData> {
+function Dialog(options: DialogOptions | string): Promise<DialogActions> {
   return new Promise((resolve) => {
     Dialog.close()
 
     const dialogOptions: DialogOptions = isString(options) ? { message: options } : options
     const reactiveDialogOptions: DialogOptions = reactive(dialogOptions)
-
     singletonOptions = reactiveDialogOptions
 
     const { unmountInstance } = mountInstance(VarDialog, reactiveDialogOptions, {
       onConfirm: () => {
-        resolve({ state: 'confirm' })
-        singletonOptions === reactiveDialogOptions && (singletonOptions = null)
+        reactiveDialogOptions.onConfirm?.()
+        resolve('confirm')
       },
       onCancel: () => {
-        resolve({ state: 'cancel' })
-        singletonOptions === reactiveDialogOptions && (singletonOptions = null)
+        reactiveDialogOptions.onCancel?.()
+        resolve( 'cancel')
       },
       onClose: () => {
-        resolve({ state: 'close' })
-        singletonOptions === reactiveDialogOptions && (singletonOptions = null)
+        reactiveDialogOptions.onClose?.()
+        resolve('close')
       },
       onClosed: () => {
+        reactiveDialogOptions.onClosed?.()
         unmountInstance()
         singletonOptions === reactiveDialogOptions && (singletonOptions = null)
       },
@@ -69,17 +74,22 @@ function Dialog(options: DialogOptions | string): Promise<DialogResolvedData> {
   })
 }
 
+VarDialog.install = function(app: App) {
+  app.component(VarDialog.name, VarDialog)
+}
+
 Dialog.install = function (app: App) {
   app.component(VarDialog.name, VarDialog)
 }
 
 Dialog.close = () => {
-  if (singletonOptions) {
-    const options = singletonOptions
+  if (singletonOptions != null) {
+    const prevSingletonOptions = singletonOptions
+    singletonOptions = null
+
     nextTick().then(() => {
-      options.show = false
+      prevSingletonOptions.show = false
     })
-    singletonOptions = null
   }
 }
 
diff --git a/packages/varlet-ui/src/dialog/props.ts b/packages/varlet-ui/src/dialog/props.ts
index 58c60b0bf8b..7fc7feb2cd1 100644
--- a/packages/varlet-ui/src/dialog/props.ts
+++ b/packages/varlet-ui/src/dialog/props.ts
@@ -1,82 +1,70 @@
 import { pickProps } from '../utils/components'
 import { props as popupProps } from '../popup/props'
+import { PropType } from 'vue'
+import { DialogActions } from '../../types/dialog'
 
 function messageAlignValidator(messageAlign: string): boolean {
-  return ['left', 'right'].includes(messageAlign)
+  return ['left', 'center', 'right'].includes(messageAlign)
 }
 
 export const props = {
-  // 开关
   show: {
     type: Boolean,
     default: false,
   },
-  'onUpdate:show': {
-    type: Function,
-  },
-  // 标题
   title: {
     type: String,
   },
-  // 信息
   message: {
     type: String,
   },
-  // 信息对齐方式
   messageAlign: {
     type: String,
     default: 'left',
     validator: messageAlignValidator,
   },
-  // 显示确认按钮
   confirmButton: {
     type: Boolean,
     default: true,
   },
-  // 显示取消按钮
   cancelButton: {
     type: Boolean,
     default: true,
   },
-  // 确认按钮文案
   confirmButtonText: {
     type: String,
   },
-  // 取消按钮文案
   cancelButtonText: {
     type: String,
   },
-  // 确认按钮文字颜色
-  confirmButtonColor: {
+  confirmButtonTextColor: {
     type: String,
   },
-  // 取消按钮文字颜色
-  cancelButtonColor: {
+  cancelButtonTextColor: {
     type: String,
   },
-  // 确认按钮背景
-  confirmButtonBackground: {
+  confirmButtonColor: {
     type: String,
   },
-  // 确认按钮背景
-  cancelButtonBackground: {
+  cancelButtonColor: {
     type: String,
   },
-  // 关闭前回调函数
   onBeforeClose: {
-    type: Function,
+    type: Function as PropType<(action: DialogActions, done: () => void) => void>,
   },
-  // 确认回调
   onConfirm: {
-    type: Function,
+    type: Function as PropType<() => void>,
   },
-  // 取消回调
   onCancel: {
-    type: Function,
+    type: Function as PropType<() => void>,
+  },
+  'onUpdate:show': {
+    type: Function as PropType<(show: boolean) => void>,
   },
   ...pickProps(popupProps, [
     'overlay',
     'overlayClass',
+    'overlayStyle',
     'lockScroll',
     'closeOnClickOverlay',
     'teleport',
@@ -85,6 +73,7 @@ export const props = {
     'onOpened',
     'onClosed',
     'onClickOverlay',
+    // internal for function call closes the dialog
     'onRouteChange',
   ]),
 }
diff --git a/packages/varlet-ui/src/menu/Menu.vue b/packages/varlet-ui/src/menu/Menu.vue
index 45b92a1bf3d..5ff45d40339 100644
--- a/packages/varlet-ui/src/menu/Menu.vue
+++ b/packages/varlet-ui/src/menu/Menu.vue
@@ -91,10 +91,12 @@ export default defineComponent({
       resize()
 
       document.addEventListener('click', handleMenuClose)
+      window.addEventListener('resize', resize)
     })
 
     onUnmounted(() => {
       document.removeEventListener('click', handleMenuClose)
+      window.removeEventListener('resize', resize)
     })
 
     return {
diff --git a/packages/varlet-ui/src/popup/Popup.vue b/packages/varlet-ui/src/popup/Popup.vue
index e07f40b41ec..c98144e8889 100644
--- a/packages/varlet-ui/src/popup/Popup.vue
+++ b/packages/varlet-ui/src/popup/Popup.vue
@@ -65,6 +65,7 @@ export default defineComponent({
       }
     )
 
+    // internal for Dialog
     addRouteListener(() => props.onRouteChange?.())
 
     return {
diff --git a/packages/varlet-ui/src/popup/docs/zh-CN.md b/packages/varlet-ui/src/popup/docs/zh-CN.md
index 3c1a1df5dcc..d5a133c2b3b 100644
--- a/packages/varlet-ui/src/popup/docs/zh-CN.md
+++ b/packages/varlet-ui/src/popup/docs/zh-CN.md
@@ -266,8 +266,8 @@ export default {
 | `overlay` | 是否显示遮罩层 | _boolean_ | `true` |  
 | `overlay-class` | 自定义遮罩层的class | _string_ | `-` |
 | `overlay-style` | 自定义遮罩层的style | _string_ | `-` |
-| `lockScroll` | 是否禁止滚动穿透, 禁止时滚动弹出层不会引发body的滚动 | _boolean_ | `true` |
-| `closeOnClickOverlay` | 是否点击遮罩层关闭弹出层 | _boolean_ | `true` | 
+| `lock-scroll` | 是否禁止滚动穿透, 禁止时滚动弹出层不会引发body的滚动 | _boolean_ | `true` |
+| `close-on-click-overlay` | 是否点击遮罩层关闭弹出层 | _boolean_ | `true` | 
 | `teleport` | 弹出层挂载的位置 | _string_ | `body` |
 
 ### 事件
diff --git a/packages/varlet-ui/src/popup/props.ts b/packages/varlet-ui/src/popup/props.ts
index 93ee31d9672..0a3d6edb222 100644
--- a/packages/varlet-ui/src/popup/props.ts
+++ b/packages/varlet-ui/src/popup/props.ts
@@ -50,6 +50,7 @@ export const props = {
   onClickOverlay: {
     type: Function as PropType<() => void>,
   },
+  // internal for Dialog
   onRouteChange: {
     type: Function as PropType<() => void>,
   },
diff --git a/packages/varlet-ui/types/dialog.d.ts b/packages/varlet-ui/types/dialog.d.ts
new file mode 100644
index 00000000000..b13108fe820
--- /dev/null
+++ b/packages/varlet-ui/types/dialog.d.ts
@@ -0,0 +1,40 @@
+import { App } from 'vue'
+import { VarComponent } from './varComponent'
+
+export class DialogComponent extends VarComponent {}
+
+export type DialogActions = 'confirm' | 'cancel' | 'close'
+
+export interface DialogOptions {
+  title?: string
+  message?: string
+  messageAlign?: string
+  confirmButton?: boolean
+  cancelButton?: boolean
+  confirmButtonText?: string
+  cancelButtonText?: string
+  confirmButtonTextColor?: string
+  cancelButtonTextColor?: string
+  confirmButtonColor?: string
+  cancelButtonColor?: string
+  overlay?: boolean
+  overlayClass?: string
+  overlayStyle?: Record<string, any>
+  lockScroll?: boolean
+  closeOnClickOverlay?: boolean
+  onOpen?: () => void
+  onOpened?: () => void
+  onBeforeClose?: (done: () => void) => void
+  onClose?: () => void
+  onClosed?: () => void
+  onConfirm?: () => void
+  onCancel?: () => void
+  onClickOverlay?: () => void
+}
+
+export interface Dialog {
+  (options: DialogOptions): Promise<DialogActions>
+  install(app: App): void
+  close(): void
+  Component: DialogComponent
+}
diff --git a/packages/varlet-ui/types/index.d.ts b/packages/varlet-ui/types/index.d.ts
index 97710c3434b..523e3101a64 100644
--- a/packages/varlet-ui/types/index.d.ts
+++ b/packages/varlet-ui/types/index.d.ts
@@ -1,4 +1,6 @@
 import { Button } from './Button'
+import { Dialog } from './Dialog'
+import { Menu } from './Menu'
 import { Popup } from './Popup'
 import { Ripple } from './Ripple'
 import { VarComponent } from './VarComponent'
@@ -7,4 +9,12 @@ import { App } from 'vue'
 
 export const install: (app: App) => void
 
-export { Button, Popup, Ripple, VarComponent, VarDirective }
+export {
+  Button,
+  Dialog,
+  Menu,
+  Popup,
+  Ripple,
+  VarComponent,
+  VarDirective,
+}
diff --git a/packages/varlet-ui/types/menu.d.ts b/packages/varlet-ui/types/menu.d.ts
new file mode 100644
index 00000000000..381ebace08b
--- /dev/null
+++ b/packages/varlet-ui/types/menu.d.ts
@@ -0,0 +1,3 @@
+import { VarComponent } from './varComponent';
+
+export class Menu extends VarComponent {}
diff --git a/packages/varlet-ui/varlet.config.js b/packages/varlet-ui/varlet.config.js
index c70fb30f89d..4800620dcfc 100644
--- a/packages/varlet-ui/varlet.config.js
+++ b/packages/varlet-ui/varlet.config.js
@@ -76,6 +76,13 @@ module.exports = {
         },
         doc: 'menu',
       },
+      {
+        text: {
+          'zh-CN': 'Dialog 对话框',
+          'en-US': 'Dialog',
+        },
+        doc: 'dialog',
+      },
       {
         text: {
           'zh-CN': 'Loading 加载',
@@ -153,13 +160,6 @@ module.exports = {
         },
         doc: 'lazy',
       },
-      {
-        text: {
-          'zh-CN': 'Dialog 对话框',
-          'en-US': 'Dialog',
-        },
-        doc: 'dialog',
-      },
       {
         text: {
           'zh-CN': 'Image 图片',