diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md
index 18b98925a..b3cc6d55f 100644
--- a/src/action-sheet/README.md
+++ b/src/action-sheet/README.md
@@ -42,28 +42,7 @@ export default {
 };
 ```
 
-### Status
-
-```html
-<van-action-sheet v-model="show" :actions="actions" />
-```
-
-```js
-export default {
-  data() {
-    return {
-      show: false,
-      actions: [
-        { name: 'Option', color: '#07c160' },
-        { loading: true },
-        { name: 'Disabled Option', disabled: true }
-      ]
-    };
-  }
-};
-```
-
-### ActionSheet with cancel button
+### Show Cancel Button
 
 ```html
 <van-action-sheet
@@ -98,54 +77,86 @@ export default {
 <van-action-sheet v-model="show" :actions="actions" description="Description" />
 ```
 
-### ActionSheet with title
+### Option Status
+
+```html
+<van-action-sheet
+  v-model="show"
+  :actions="actions"
+  cancel-text="Cancel"
+  @cancel="onCancel"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      show: false,
+      actions: [
+        { name: 'Option', color: '#07c160' },
+        { loading: true },
+        { name: 'Disabled Option', disabled: true }
+      ]
+    };
+  }
+};
+```
+
+### Custom Panel
 
 ```html
 <van-action-sheet v-model="show" title="Title">
-  <p>Content</p>
+  <div class="content">Content</div>
 </van-action-sheet>
+
+<style>
+.content {
+  padding: 16px 16px 160px;
+}
+</style>
 ```
 
 ## API
 
 ### Props
 
-| Attribute              | Description                                   | Type                      | Default |
-| ---------------------- | --------------------------------------------- | ------------------------- | ------- |
-| actions                | Options                                       | _Action[]_                | `[]`    |
-| title                  | Title                                         | _string_                  | -       |
-| cancel-text            | Text of cancel button                         | _string_                  | -       |
-| description `v2.2.8`   | Description above the options                 | _string_                  | -       |
-| overlay                | Whether to show overlay                       | _boolean_                 | `true`  |
-| round `v2.0.9`         | Whether to show round corner                  | _boolean_                 | `true`  |
-| close-icon `v2.2.13`   | Close icon name                               | _string_                  | `cross` |
-| close-on-click-action  | Whether to close when click action            | _boolean_                 | `false` |
-| close-on-click-overlay | Whether to close when click overlay           | _boolean_                 | `true`  |
-| lazy-render            | Whether to lazy render util appeared          | _boolean_                 | `true`  |
-| lock-scroll            | Whether to lock background scroll             | _boolean_                 | `true`  |
-| duration `v2.0.3`      | Transition duration, unit second              | _number_                  | `0.3`   |
-| get-container          | Return the mount node for action-sheet        | _string \| () => Element_ | -       |
-| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_                 | `true`  |
-
-### Events
-
-| Event         | Description                       | Arguments   |
-| ------------- | --------------------------------- | ----------- |
-| select        | Triggered when click option       | item, index |
-| cancel        | Triggered when cancel click       | -           |
-| click-overlay | Triggered when click overlay      | -           |
-| open          | Triggered when open ActionSheet   | -           |
-| opened        | Triggered when opened ActionSheet | -           |
-| close         | Triggered when close ActionSheet  | -           |
-| closed        | Triggered when closed ActionSheet | -           |
+| Attribute | Description | Type | Default |
+|------|------|------|------|
+| actions | Options | _Action[]_ | `[]` | 
+| title | Title | _string_ | - |
+| cancel-text | Text of cancel button | _string_ | - |
+| description `v2.2.8` | Description above the options | _string_ | - |
+| close-icon `v2.2.13` | Close icon name | _string_ | `cross` |
+| duration `v2.0.3` | Transition duration, unit second | _number_ | `0.3` |
+| round `v2.0.9` | Whether to show round corner | _boolean_ | `true` |
+| overlay | Whether to show overlay | _boolean_ | `true` |
+| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
+| lazy-render | Whether to lazy render util appeared | _boolean_ | `true`  |
+| close-on-click-action | Whether to close when click action | _boolean_ | `false` |
+| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` |
+| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
+| get-container | Return the mount node for action-sheet | _string \| () => Element_ | - |
 
 ### Data Structure of Action
 
-| Key       | Description                  | Type      |
-| --------- | ---------------------------- | --------- |
-| name      | Title                        | _string_  |
-| subname   | Subtitle                     | _string_  |
-| color     | Text color                   | _string_  |
-| className | className for the option     | _any_     |
-| loading   | Whether to be loading status | _boolean_ |
-| disabled  | Whether to be disabled       | _boolean_ |
+| Key | Description | Type |
+|------|------|------|
+| name | Title | _string_ |
+| subname | Subtitle | _string_ |
+| color | Text color | _string_ |
+| className | className for the option | _any_ |
+| loading | Whether to be loading status | _boolean_ |
+| disabled | Whether to be disabled | _boolean_ |
+
+### Events
+
+| Event | Description | Arguments |
+|------|------|------|
+| select | Triggered when click option | item, index |
+| cancel | Triggered when cancel click | - |
+| click-overlay | Triggered when click overlay | - |
+| open | Triggered when open ActionSheet | - |
+| opened | Triggered when opened ActionSheet | - |
+| close | Triggered when close ActionSheet | - |
+| closed | Triggered when closed ActionSheet | - |
diff --git a/src/action-sheet/README.zh-CN.md b/src/action-sheet/README.zh-CN.md
index 8553200cb..e0bdf6f1d 100644
--- a/src/action-sheet/README.zh-CN.md
+++ b/src/action-sheet/README.zh-CN.md
@@ -35,8 +35,8 @@ export default {
   },
   methods: {
     onSelect(item) {
-      // 默认情况下，点击选项时不会自动关闭菜单
-      // 可以通过 close-on-click-action 属性开启自动关闭
+      // 默认情况下点击选项时不会自动收起
+      // 可以通过 close-on-click-action 属性开启自动收起
       this.show = false;
       Toast(item.name);
     }
@@ -44,29 +44,6 @@ export default {
 }
 ```
 
-### 选项状态
-
-选项可以设置为加载状态或禁用状态，也可以通过`color`设置选项颜色
-
-```html
-<van-action-sheet v-model="show" :actions="actions" />
-```
-
-```js
-export default {
-  data() {
-    return {
-      show: false,
-      actions: [
-        { name: '选项', color: '#07c160' },
-        { loading: true },
-        { name: '禁用选项', disabled: true }
-      ]
-    };
-  }
-}
-```
-
 ### 展示取消按钮
 
 设置`cancel-text`属性后，会在底部展示取消按钮，点击后关闭当前菜单
@@ -110,14 +87,48 @@ export default {
 />
 ```
 
-### 展示标题栏
+### 选项状态
 
-通过设置`title`属性展示标题栏，同时可以使用插槽自定义菜单内容
+可以将选项设置为加载状态或禁用状态，或者通过`color`设置选项颜色
+
+```html
+<van-action-sheet
+  v-model="show"
+  :actions="actions"
+  cancel-text="取消"
+  @cancel="onCancel"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      show: false,
+      actions: [
+        { name: '选项', color: '#07c160' },
+        { loading: true },
+        { name: '禁用选项', disabled: true }
+      ]
+    };
+  }
+}
+```
+
+### 自定义面板
+
+通过插槽可以自定义菜单的展示内容，同时可以使用`title`属性展示标题栏
 
 ```html
 <van-action-sheet v-model="show" title="标题">
-  <p>内容</p>
+  <div class="content">内容</div>
 </van-action-sheet>
+
+<style>
+.content {
+  padding: 16px 16px 160px;
+}
+</style>
 ```
 
 ## API
@@ -130,28 +141,16 @@ export default {
 | title | 顶部标题 | *string* | - |
 | cancel-text | 取消按钮文字 | *string* | - |
 | description `v2.2.8` | 选项上方的描述信息 | *string* | - |
-| overlay | 是否显示遮罩层 | *boolean* | `true` |
+| close-icon `v2.2.13` | 关闭图标名称或图片链接，可选值见 [Icon 组件](#/zh-CN/icon) | *string* | `cross` |
+| duration `v2.0.3` | 动画时长，单位秒 | *number* | `0.3` |
 | round `v2.0.9` | 是否显示圆角 | *boolean* | `true` |
-| close-icon `v2.2.13` | 关闭图标名称或图片链接 | *string* | `cross` |
+| overlay | 是否显示遮罩层 | *boolean* | `true` |
+| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` |
+| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` |
 | close-on-click-action | 是否在点击选项后关闭 | *boolean* | `false` |
 | close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |
-| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` |
-| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` |
-| duration `v2.0.3` | 动画时长，单位秒 | *number* | `0.3` |
-| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - |
 | safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-|------|------|------|
-| select | 选中选项时触发，禁用或加载状态下不会触发 | item: 选项对应的对象, index: 选择对应的索引 |
-| cancel | 取消按钮点击时触发 | - |
-| click-overlay | 点击遮罩层时触发 | - |
-| open | 打开菜单时触发 | - |
-| opened | 打开菜单且动画结束后触发 | - |
-| close | 关闭菜单时触发 | - |
-| closed | 关闭菜单且动画结束后触发 | - |
+| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - |
 
 ### Action 数据结构
 
@@ -166,6 +165,18 @@ export default {
 | loading | 是否为加载状态 | *boolean* |
 | disabled | 是否为禁用状态 | *boolean* |
 
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| select | 选中选项时触发，禁用或加载状态下不会触发 | item: 选项对应的对象, index: 选择对应的索引 |
+| cancel | 取消按钮点击时触发 | - |
+| click-overlay | 点击遮罩层时触发 | - |
+| open | 打开菜单时触发 | - |
+| opened | 打开菜单且动画结束后触发 | - |
+| close | 关闭菜单时触发 | - |
+| closed | 关闭菜单且动画结束后触发 | - |
+
 ## 常见问题
 
 ### 引入时提示 dependencies not found？
diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue
index 1b3ac980c..c48ec118f 100644
--- a/src/action-sheet/demo/index.vue
+++ b/src/action-sheet/demo/index.vue
@@ -1,60 +1,58 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-button type="primary" @click="show1 = true">
-        {{ $t('buttonText') }}
-      </van-button>
-      <van-action-sheet
-        v-model="show1"
-        :actions="simpleActions"
-        @select="onSelect"
+      <van-cell is-link :title="$t('basicUsage')" @click="show.basic = true" />
+      <van-cell is-link :title="$t('showCancel')" @click="show.cancel = true" />
+      <van-cell
+        is-link
+        :title="$t('showDescription')"
+        @click="show.description = true"
       />
     </demo-block>
 
-    <demo-block :title="$t('status')">
-      <van-button type="primary" @click="show2 = true">
-        {{ $t('buttonText') }}
-      </van-button>
-      <van-action-sheet
-        v-model="show2"
-        close-on-click-action
-        :actions="statusActions"
+    <demo-block :title="$t('optionStatus')">
+      <van-cell
+        is-link
+        :title="$t('optionStatus')"
+        @click="show.status = true"
       />
     </demo-block>
 
-    <demo-block :title="$t('showCancel')">
-      <van-button type="primary" @click="show3 = true">
-        {{ $t('buttonText') }}
-      </van-button>
-      <van-action-sheet
-        v-model="show3"
-        :actions="simpleActions"
-        close-on-click-action
-        :cancel-text="$t('cancel')"
-        @cancel="onCancel"
-      />
+    <demo-block :title="$t('customPanel')">
+      <van-cell is-link :title="$t('customPanel')" @click="show.title = true" />
     </demo-block>
 
-    <demo-block :title="$t('showDescription')">
-      <van-button type="primary" @click="show4 = true">
-        {{ $t('buttonText') }}
-      </van-button>
-      <van-action-sheet
-        v-model="show4"
-        :actions="simpleActions"
-        close-on-click-action
-        :description="$t('description')"
-      />
-    </demo-block>
+    <van-action-sheet
+      v-model="show.basic"
+      :actions="simpleActions"
+      @select="onSelect"
+    />
 
-    <demo-block :title="$t('showTitle')">
-      <van-button type="primary" @click="show5 = true">
-        {{ $t('buttonText') }}
-      </van-button>
-      <van-action-sheet v-model="show5" :title="$t('title')">
-        <p>{{ $t('content') }}</p>
-      </van-action-sheet>
-    </demo-block>
+    <van-action-sheet
+      v-model="show.status"
+      close-on-click-action
+      :actions="statusActions"
+      :cancel-text="$t('cancel')"
+    />
+
+    <van-action-sheet
+      v-model="show.cancel"
+      :actions="simpleActions"
+      close-on-click-action
+      :cancel-text="$t('cancel')"
+      @cancel="onCancel"
+    />
+
+    <van-action-sheet
+      v-model="show.description"
+      :actions="simpleActions"
+      close-on-click-action
+      :description="$t('description')"
+    />
+
+    <van-action-sheet v-model="show.title" :title="$t('title')">
+      <div class="demo-action-sheet-content">{{ $t('content') }}</div>
+    </van-action-sheet>
   </demo-section>
 </template>
 
@@ -64,34 +62,36 @@ import { GREEN } from '../../utils/constant';
 export default {
   i18n: {
     'zh-CN': {
-      buttonText: '弹出菜单',
-      status: '选项状态',
       subname: '副文本',
-      disabledOption: '禁用选项',
-      showTitle: '展示标题栏',
       showCancel: '展示取消按钮',
-      showDescription: '展示描述信息',
+      buttonText: '弹出菜单',
+      customPanel: '自定义面板',
       description: '这是一段描述信息',
+      optionStatus: '选项状态',
+      disabledOption: '禁用选项',
+      showDescription: '展示描述信息',
     },
     'en-US': {
-      buttonText: 'Show ActionSheet',
-      status: 'Status',
       subname: 'Subname',
-      disabledOption: 'Disabled Option',
-      showTitle: 'ActionSheet with title',
-      showCancel: 'ActionSheet with cancel button',
-      showDescription: 'ActionSheet with description',
+      showCancel: 'Show Cancel Button',
+      buttonText: 'Show ActionSheet',
+      customPanel: 'Custom Panel',
       description: 'Description',
+      optionStatus: 'Option Status',
+      disabledOption: 'Disabled Option',
+      showDescription: 'Show Description',
     },
   },
 
   data() {
     return {
-      show1: false,
-      show2: false,
-      show3: false,
-      show4: false,
-      show5: false,
+      show: {
+        basic: false,
+        cancel: false,
+        title: false,
+        status: false,
+        description: false,
+      },
     };
   },
 
@@ -115,7 +115,7 @@ export default {
 
   methods: {
     onSelect(item) {
-      this.show1 = false;
+      this.show.basic = false;
       this.$toast(item.name);
     },
 
@@ -130,13 +130,7 @@ export default {
 @import '../../style/var';
 
 .demo-action-sheet {
-  background-color: @white;
-
-  .van-button {
-    margin-left: @padding-md;
-  }
-
-  p {
+  &-content {
     padding: @padding-md @padding-md @padding-md * 10;
   }
 }
diff --git a/src/action-sheet/test/__snapshots__/demo.spec.js.snap b/src/action-sheet/test/__snapshots__/demo.spec.js.snap
index 22427b83d..0b0f77f33 100644
--- a/src/action-sheet/test/__snapshots__/demo.spec.js.snap
+++ b/src/action-sheet/test/__snapshots__/demo.spec.js.snap
@@ -2,30 +2,36 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      弹出菜单
-    </span></button>
-    <!---->
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>基础用法</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>展示取消按钮</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>展示描述信息</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
   </div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      弹出菜单
-    </span></button>
-    <!---->
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>选项状态</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
   </div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      弹出菜单
-    </span></button>
-    <!---->
-  </div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      弹出菜单
-    </span></button>
-    <!---->
-  </div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      弹出菜单
-    </span></button>
-    <!---->
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>自定义面板</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
   </div>
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+  <!---->
 </div>
 `;