[new feature] ActionSheet: add round prop (#3874)

src/action-sheet/README.md

@@ -97,6 +97,7 @@ export default {
 | title | Title | `string` | - |
 | cancel-text | Text of cancel button | `string` | - |
 | overlay | Whether to show overlay | `boolean` | `true` |
+| round | Whether to show round corner | `boolean` | `false` | 
 | 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` |

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

@@ -104,6 +104,7 @@ export default {
 | title | 标题 | `string` | - | - |
 | cancel-text | 取消按钮文字 | `string` | - | - |
 | overlay | 是否显示遮罩层 | `boolean` | `true` | - |
+| round | 是否显示圆角 | `boolean` | `false` | 2.0.9 |
 | close-on-click-action | 是否在点击选项后关闭 | `boolean` | `false` | 2.0.0 |
 | close-on-click-overlay | 是否在点击遮罩层后关闭 | `boolean` | `true` | - |
 | lazy-render | 是否在显示弹层时才渲染节点 | `boolean` | `true` | - |

src/action-sheet/index.tsx

@@ -21,6 +21,7 @@ export type ActionSheetItem = {
 
 export type ActionSheetProps = PopupMixinProps & {
   title?: string;
+  round?: boolean;
   actions?: ActionSheetItem[];
   duration: number;
   cancelText?: string;
@@ -116,6 +117,7 @@ function ActionSheet(
     <Popup
       class={bem({ 'safe-area-inset-bottom': props.safeAreaInsetBottom })}
       position="bottom"
+      round={props.round}
       value={props.value}
       overlay={props.overlay}
       duration={props.duration}
@@ -136,6 +138,7 @@ function ActionSheet(
 ActionSheet.props = {
   ...PopupMixin.props,
   title: String,
+  round: Boolean,
   actions: Array,
   duration: Number,
   cancelText: String,

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

@@ -21,3 +21,9 @@ exports[`disable lazy-render 1`] = `
 `;
 
 exports[`render title and default slot 1`] = ``;
+
+exports[`round prop 1`] = `
+<div class="van-popup van-popup--round van-popup--bottom van-action-sheet" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
+</div>
+`;

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

@@ -137,3 +137,15 @@ test('close-on-click-action prop', () => {
 
   expect(onInput).toHaveBeenCalledWith(false);
 });
+
+test('round prop', () => {
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      round: true,
+      actions: [{ name: 'Option' }]
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});