diff --git a/src/packages/actionsheet/actionsheet.tsx b/src/packages/actionsheet/actionsheet.tsx
index b81bdb03865e7234f73b0de8626da93152aa9f83..234cbe89ca0059f664000cae5fd49c1d04eebc4b 100644
--- a/src/packages/actionsheet/actionsheet.tsx
+++ b/src/packages/actionsheet/actionsheet.tsx
@@ -52,6 +52,7 @@ export const ActionSheet: FunctionComponent<
     visible,
     className,
     style,
+    ...rest
   } = { ...defaultProps, ...props }
 
   const [isShow, setIsShow] = useState(false)
@@ -86,7 +87,7 @@ export const ActionSheet: FunctionComponent<
         cancel && cancel()
       }}
     >
-      <div className={`${b()} ${className}`} style={style}>
+      <div className={`${b()} ${className}`} style={style} {...rest}>
         {title && <div className={b('title')}>{title}</div>}
         {description && <div className={`${b('item')} desc`}>{description}</div>}
         {menuItems.length ? (
diff --git a/src/packages/actionsheet/doc.md b/src/packages/actionsheet/doc.md
index 11994e869456430365932d53b25598d4b1f5aed3..9d68fce3c82196745d4e3aa97e7fe88ff0717e26 100644
--- a/src/packages/actionsheet/doc.md
+++ b/src/packages/actionsheet/doc.md
@@ -9,91 +9,136 @@
 ``` javascript
 import { ActionSheet } from '@nutui/nutui';
 ```
+## 代码示例
 
-## 基本用法
+### 基本用法
 
 默认
-``` html
-<div @click="switchActionSheet">
-   <span><label>基础用法</label></span>
-   <div class="selected-option" v-html="state.val"></div>
-</div>
-<nut-actionsheet
-  v-model:visible="state.isVisible"
-  :menu-items="menuItems"
-  @choose="chooseItem"
-></nut-actionsheet>
+``` tsx
+<Cell isLink={true} onClick={() => setIsVisible1(!isVisible1)}>
+  <span>
+    <label>基础用法</label>
+  </span>
+  <div className="selected-option">{val1}</div>
+</Cell>
+        
+<ActionSheet
+  visible={isVisible1}
+  menuItems={menuItemsOne}
+  choose={chooseItem}
+  cancel={() => setIsVisible1(false)}
+></ActionSheet>å
 ```
 
-## 展示取消按钮
-```html
-<div @click="switchActionSheet">
-  <span><label>展示取消按钮</label></span>
-  <div class="selected-option" v-html="state.val"></div>
-</div>
-<nut-actionsheet v-model:visible="isVisible" 
-  @close="switchActionSheet"
-  :menu-items="menuItems"
-  @choose="chooseItem"
-  cancel-txt="取消"
-></nut-actionsheet>
+### 展示取消按钮
+``` tsx
+<Cell isLink={true} onClick={() => setIsVisible2(!isVisible2)}>
+  <span>
+    <label>展示取消按钮</label>
+  </span>
+  <div className="selected-option">{val2}</div>
+</Cell>
+        
+<ActionSheet
+  visible={isVisible2}
+  cancelTxt="取消"
+  menuItems={menuItemsOne}
+  choose={chooseItemTwo}
+  cancel={() => setIsVisible2(false)}
+></ActionSheet>
 ```
-## 展示描述信息
-```html
-<div @click="switchActionSheet">
-   <span><label>展示取消按钮</label></span>
-    <div class="selected-option" v-html="state.val"></div>
-</div>
- <nut-actionsheet v-model:visible="isVisible" 
-    @close="switchActionSheet"
-    description="state.desc"
-    :menu-items="menuItems"
-    @choose="chooseItem"
-    cancel-txt="取消"
-></nut-actionsheet>
+### 展示描述信息
+```tsx
+<Cell isLink={true} onClick={() => setIsVisible3(!isVisible3)}>
+  <span>
+    <label>展示描述信息</label>
+  </span>
+  <div className="selected-option">{val3}</div>
+</Cell>
+<ActionSheet
+  visible={isVisible3}
+  description="这是一段描述信息"
+  menuItems={menuItemsTwo}
+  choose={chooseItemThree}
+  cancelTxt="取消"
+  cancel={() => setIsVisible3(false)}
+></ActionSheet>
 ```
 
-## 选项状态
-```html
-<div @click="switchActionSheet">
-    <span class="title"><label>性别</label></span>
-    <span class="selected-option" v-html="sex"></span>
-</div>
-<nut-actionsheet
-@close="switchActionSheet"
-  v-model:visible="state.isVisible4"
-  cancel-txt="取消"
-  :menu-items="menuItemsThree"
-></nut-actionsheet>
+### 选项状态
+```tsx
+<Cell isLink={true} onClick={() => setIsVisible4(!isVisible4)}>
+  <span>
+    <label>选项状态</label>
+  </span>
+</Cell>
+<ActionSheet
+  visible={isVisible4}
+  cancelTxt="取消"
+  cancel={() => setIsVisible4(false)}
+  menuItems={menuItemsThree}
+  chooseTagValue="着色选项"
+  choose={() => {
+    setIsVisible4(false)
+  }}
+></ActionSheet>
 ```
 
 ```javascript
-setup() {
-    const state = reactive({
-      isVisible: false,
-      value: '',
-      desc: '这是一段描述信息'
-    });
-    const menuItems = [
-      {
-        name: '选项一',
-        value: 0
-      },
-      {
-        name: '选项二',
-        value: 1
-      },
-      {
-        name: '选项三',
-        value: 2
-      }
-    ];
-     const switchActionSheet = () => {
-       state.isVisible = !state.isVisible
-    };
-    const chooseItem = (item,index) => {
-      console.log(item,index);
-    };
+  const [isVisible1, setIsVisible1] = useState(false)
+  const [isVisible2, setIsVisible2] = useState(false)
+  const [isVisible3, setIsVisible3] = useState(false)
+  const [isVisible4, setIsVisible4] = useState(false)
+  const [val1, setVal1] = useState('')
+  const [val2, setVal2] = useState('')
+  const [val3, setVal3] = useState('')
+  const menuItemsOne: ItemType<string>[] = [
+    {
+      name: '选项一',
+    },
+    {
+      name: '选项二',
+    },
+    {
+      name: '选项三',
+    },
+  ]
+  const menuItemsTwo: ItemType<string>[] = [
+    {
+      name: '选项一',
+    },
+    {
+      name: '选项二',
+    },
+    {
+      name: '选项三',
+      subname: '描述信息',
+    },
+  ]
+  const menuItemsThree: ItemType<string | boolean>[] = [
+    {
+      name: '着色选项',
+    },
+    {
+      name: '禁用选项',
+      disable: true,
+    },
+  ]
+
+  const chooseItem = (itemParams: any) => {
+    console.log(itemParams.name, 'itemParams')
+    setVal1(itemParams.name)
+    setIsVisible1(false)
+  }
+
+  const chooseItemTwo = (itemParams: Item) => {
+    setVal2(itemParams.name)
+    setIsVisible2(false)
+  }
+  const chooseItemThree = (itemParams: Item) => {
+    setVal3(itemParams.name)
+    setIsVisible3(false)
+  }
 
 ```