[new feature] ActionSheet: add close-on-click-action prop

docs/markdown/v2-progress-tracking.md

@@ -55,6 +55,7 @@
 
 ### ActionSheet
 
+- 新增`close-on-click-action`属性
 - 支持同时使用`title`和`actions`属性
 
 ### Button

packages/action-sheet/en-US.md

@@ -95,6 +95,7 @@ export default {
 | title | Title | `String` | - |
 | cancel-text | Text of cancel button | `String` | - |
 | overlay | Whether to show overlay | `Boolean` | `true` |
+| close-on-click-action | Whether to close when click action | `Boolean` | `false` |
 | close-on-click-overlay | Whether to close when click overlay | `Boolean` | `true` |
 | lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
 | get-container | Return the mount node for action-sheet | `String | () => HTMLElement` | - |

packages/action-sheet/index.tsx

@@ -23,6 +23,7 @@ export type ActionSheetProps = PopupMixinProps & {
   title?: string;
   actions: ActionSheetItem[];
   cancelText?: string;
+  closeOnClickAction?: boolean;
   safeAreaInsetBottom?: boolean;
 };
 
@@ -52,6 +53,26 @@ function ActionSheet(
     }
   }
 
+  function onClickOption(item: ActionSheetItem, index: number) {
+    return function (event: Event) {
+      event.stopPropagation();
+
+      if (item.disabled || item.loading) {
+        return;
+      }
+
+      if (item.callback) {
+        item.callback(item);
+      }
+
+      emit(ctx, 'select', item, index);
+
+      if (props.closeOnClickAction) {
+        emit(ctx, 'input', false);
+      }
+    };
+  }
+
   const Option = (item: ActionSheetItem, index: number) => (
     <div
       class={[
@@ -59,17 +80,7 @@ function ActionSheet(
         item.className,
         'van-hairline--top'
       ]}
-      onClick={(event: Event) => {
-        event.stopPropagation();
-
-        if (!item.disabled && !item.loading) {
-          if (item.callback) {
-            item.callback(item);
-          }
-
-          emit(ctx, 'select', item, index);
-        }
-      }}
+      onClick={onClickOption(item, index)}
     >
       {item.loading ? (
         <Loading class={bem('loading')} size="20px" />
@@ -113,6 +124,7 @@ ActionSheet.props = {
   title: String,
   actions: Array,
   cancelText: String,
+  closeOnClickAction: Boolean,
   safeAreaInsetBottom: Boolean,
   overlay: {
     type: Boolean,

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

@@ -64,3 +64,24 @@ test('get container', () => {
 
   expect(wrapper.vm.$el.parentNode).toEqual(document.body);
 });
+
+test('close-on-click-action prop', () => {
+  const onInput = jest.fn();
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      actions: [{ name: 'Option' }],
+      closeOnClickAction: true
+    },
+    context: {
+      on: {
+        input: onInput
+      }
+    }
+  });
+
+  const option = wrapper.find('.van-action-sheet__item');
+  option.trigger('click');
+
+  expect(onInput).toHaveBeenCalledWith(false);
+});

packages/action-sheet/zh-CN.md

@@ -102,6 +102,7 @@ export default {
 | title | 标题 | `String` | - | - |
 | cancel-text | 取消按钮文字 | `String` | - | - |
 | overlay | 是否显示遮罩层 | `Boolean` | `true` | - |
+| close-on-click-action | 是否在点击选项后关闭 | `Boolean` | `false` | 2.0.0 |
 | close-on-click-overlay | 是否在点击蒙层后关闭 | `Boolean` | `true` | - |
 | lazy-render | 是否在显示弹层时才渲染节点 | `Boolean` | `true` | 1.1.11 |
 | get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | - | - |