feat(ShareSheet): add cancel slot (#8335)

src/share-sheet/README.md

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

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

@@ -215,10 +215,11 @@ export default {
 
 ### Slots
 
-| 名称        | 说明           |
-| ----------- | -------------- |
-| title       | 自定义顶部标题 |
-| description | 自定义描述文字 |
+| 名称             | 说明               |
+| ---------------- | ------------------ |
+| title            | 自定义顶部标题     |
+| description      | 自定义描述文字     |
+| cancel `v3.0.10` | 自定义取消按钮内容 |
 
 ### 样式变量
 

src/share-sheet/ShareSheet.tsx

@@ -127,12 +127,12 @@ export default defineComponent({
       return renderOptions(options as ShareSheetOption[]);
     };
 
-    const renderCancelText = () => {
-      const text = props.cancelText ?? t('cancel');
-      if (text) {
+    const renderCancelButton = () => {
+      const cancelText = props.cancelText ?? t('cancel');
+      if (slots.cancel || cancelText) {
         return (
           <button type="button" class={bem('cancel')} onClick={onCancel}>
-            {text}
+            {slots.cancel ? slots.cancel() : cancelText}
           </button>
         );
       }
@@ -150,7 +150,7 @@ export default defineComponent({
       >
         {renderHeader()}
         {renderRows()}
-        {renderCancelText()}
+        {renderCancelButton()}
       </Popup>
     );
   },

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

@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should render cancel slot correctly 1`] = `
+<button type="button"
+        class="van-share-sheet__cancel"
+>
+  Custom Cancel
+</button>
+`;
+
 exports[`should render cancel text when using cancel-text prop 1`] = `
 <button type="button"
         class="van-share-sheet__cancel"

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

@@ -104,3 +104,16 @@ test('should emit click-overlay event when overlay is clicked', async () => {
   expect(onClickOverlay).toHaveBeenCalledTimes(1);
   expect(wrapper.emitted('update:show')![0]).toEqual([false]);
 });
+
+test('should render cancel slot correctly', async () => {
+  const wrapper = mount(ShareSheet, {
+    props: {
+      show: true,
+    },
+    slots: {
+      cancel: () => 'Custom Cancel',
+    },
+  });
+
+  expect(wrapper.find('.van-share-sheet__cancel').html()).toMatchSnapshot();
+});