feat(ActionSheet): add cancel slot (#8333)

src/action-sheet/ActionSheet.tsx

@@ -78,11 +78,11 @@ export default defineComponent({
     };
 
     const renderCancel = () => {
-      if (props.cancelText) {
+      if (slots.cancel || props.cancelText) {
         return [
           <div class={bem('gap')} />,
           <button type="button" class={bem('cancel')} onClick={onCancel}>
-            {props.cancelText}
+            {slots.cancel ? slots.cancel() : props.cancelText}
           </button>,
         ];
       }

src/action-sheet/README.md

@@ -211,10 +211,11 @@ export default {
 
 ### Slots
 
-| Name        | Description        |
-| ----------- | ------------------ |
-| default     | Custom content     |
-| description | Custom description |
+| Name             | Description                          |
+| ---------------- | ------------------------------------ |
+| default          | Custom content                       |
+| description      | Custom description above the options |
+| cancel `v3.0.10` | Custom the content of cancel button  |
 
 ### Less Variables
 

src/action-sheet/README.zh-CN.md

@@ -227,10 +227,11 @@ export default {
 
 ### Slots
 
-| 名称        | 说明                 |
-| ----------- | -------------------- |
-| default     | 自定义面板的展示内容 |
-| description | 自定义描述文案       |
+| 名称             | 说明                 |
+| ---------------- | -------------------- |
+| default          | 自定义面板的展示内容 |
+| description      | 自定义描述文案       |
+| cancel `v3.0.10` | 自定义取消按钮内容   |
 
 ### 样式变量
 

src/action-sheet/test/__snapshots__/index.spec.ts.snap

@@ -5,6 +5,14 @@ exports[`should allow to custom close icon with closeIcon prop 1`] = `
 </i>
 `;
 
+exports[`should render cancel slot correctly 1`] = `
+<button type="button"
+        class="van-action-sheet__cancel"
+>
+  Custom Cancel
+</button>
+`;
+
 exports[`should render default slot correctly 1`] = `
 <transition-stub>
   <div class="van-overlay">

src/action-sheet/test/index.spec.ts

@@ -182,6 +182,19 @@ test('should render description correctly', () => {
   ).toMatchSnapshot();
 });
 
+test('should render cancel slot correctly', () => {
+  const wrapper = mount(ActionSheet, {
+    props: {
+      show: true,
+    },
+    slots: {
+      cancel: () => 'Custom Cancel',
+    },
+  });
+
+  expect(wrapper.find('.van-action-sheet__cancel').html()).toMatchSnapshot();
+});
+
 test('should render description slot when match snapshot', () => {
   const wrapper = mount(ActionSheet, {
     props: {