Merge branch 'dev' into next

src/action-sheet/README.md

@@ -190,3 +190,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

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

src/action-sheet/index.js

@@ -102,40 +102,37 @@ export default createComponent({
       );
     };
 
+    const renderDescription = () => {
+      if (props.description || slots.description) {
+        const content = slots.description
+          ? slots.description()
+          : props.description;
+        return <div class={bem('description')}>{content}</div>;
+      }
+    };
+
     const renderOptions = () => {
       if (props.actions) {
         return props.actions.map(renderOption);
       }
     };
 
-    return () => {
+    return () => (
-      const { round, description } = props;
+      <Popup
-
+        class={bem()}
-      const Content = slots.default && (
+        round={props.round}
-        <div class={bem('content')}>{slots.default()}</div>
+        position="bottom"
-      );
+        {...{
-
+          ...pick(props, popupPropKeys),
-      const Description = description && (
+          'onUpdate:show': onUpdateShow,
-        <div class={bem('description')}>{description}</div>
+        }}
-      );
+      >
-
+        {renderHeader()}
-      return (
+        {renderDescription()}
-        <Popup
+        {renderOptions()}
-          class={bem()}
+        {slots.default && <div class={bem('content')}>{slots.default()}</div>}
-          round={round}
+        {renderCancel()}
-          position="bottom"
+      </Popup>
-          {...{
+    );
-            ...pick(props, popupPropKeys),
-            'onUpdate:show': onUpdateShow,
-          }}
-        >
-          {renderHeader()}
-          {Description}
-          {renderOptions()}
-          {Content}
-          {renderCancel()}
-        </Popup>
-      );
-    };
   },
 });

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: {