feat(ActionSheet): add description slot (#7068)

src/action-sheet/README.md

@@ -189,3 +189,10 @@ export default {
 | opened | Triggered when opened ActionSheet | - |
 | closed | Triggered when closed ActionSheet | - |
 | click-overlay | Triggered when click overlay | - |
+
+### Slots
+
+| Name                  | Description        |
+| --------------------- | ------------------ |
+| default               | Custom content     |
+| description `v2.10.4` | Custom description |

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

@@ -198,6 +198,13 @@ export default {
 | closed | 关闭面板且动画结束后触发 | - |
 | click-overlay | 点击遮罩层时触发 | - |
 
+### Slots
+
+| 名称                  | 说明                 |
+| --------------------- | -------------------- |
+| default               | 自定义面板的展示内容 |
+| description `v2.10.4` | 自定义描述文案       |
+
 ## 常见问题
 
 ### 引入时提示 dependencies not found？

src/action-sheet/index.tsx

@@ -12,7 +12,7 @@ import Loading from '../loading';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
-import { DefaultSlots } from '../utils/types';
+import { ScopedSlot, DefaultSlots } from '../utils/types';
 import { PopupMixinProps } from '../mixins/popup/type';
 
 export type ActionSheetItem = {
@@ -38,12 +38,16 @@ export type ActionSheetProps = PopupMixinProps & {
   safeAreaInsetBottom?: boolean;
 };
 
+export type ActionSheetSlots = DefaultSlots & {
+  description?: ScopedSlot;
+};
+
 const [createComponent, bem] = createNamespace('action-sheet');
 
 function ActionSheet(
   h: CreateElement,
   props: ActionSheetProps,
-  slots: DefaultSlots,
+  slots: ActionSheetSlots,
   ctx: RenderContext<ActionSheetProps>
 ) {
   const { title, cancelText } = props;
@@ -129,9 +133,12 @@ function ActionSheet(
     }
   }
 
-  const Description = props.description && (
-    <div class={bem('description')}>{props.description}</div>
-  );
+  function Description() {
+    const description = slots.description?.() || props.description;
+    if (description) {
+      return <div class={bem('description')}>{description}</div>;
+    }
+  }
 
   return (
     <Popup
@@ -150,7 +157,7 @@ function ActionSheet(
       {...inherit(ctx, true)}
     >
       {Header()}
-      {Description}
+      {Description()}
       {props.actions && props.actions.map(Option)}
       {Content()}
       {CancelText()}

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

@@ -24,6 +24,12 @@ exports[`description prop 1`] = `
 </div>
 `;
 
+exports[`description slot 1`] = `
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__description">Custom Description</div><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
+</div>
+`;
+
 exports[`disable lazy-render 1`] = `
 <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
   <div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>

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

@@ -173,6 +173,20 @@ test('description prop', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('description slot', () => {
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      actions: [{ name: 'Option' }],
+    },
+    scopedSlots: {
+      description: () => 'Custom Description',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('close-icon prop', () => {
   const wrapper = mount(ActionSheet, {
     propsData: {