[new feature] Popup: add round prop (#3781)

src/popup/README.md

@@ -48,6 +48,17 @@ Use `position` prop to set popup display position
 />
 ```
 
+### Round Corner
+
+```html
+<van-popup
+  v-model="show"
+  round
+  position="bottom"
+  :style="{ height: '20%' }"
+/>
+```
+
 ### Get Container
 
 Use `get-container` prop to specify mount location
@@ -93,11 +104,12 @@ export default {
 | position | Can be set to `top` `bottom` `right` `left` | `String` | `center` |
 | overlay-class | Custom overlay class | `String` | - |
 | overlay-style | Custom overlay style | `Object` | - |
-| close-on-click-overlay | Close popup when click overlay | `Boolean` | `true` |
-| transition | Transition | `String` | `popup-slide` |
 | duration | Transition duration, unit second | `Number` | `0.3` |
+| round | Whether to show round corner | `Boolean` | `false` | 
 | lock-scroll | Whether to lock background scroll | `Boolean` | `true` |
 | lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
+| close-on-click-overlay | Whether to close when click overlay | `Boolean` | `true` |
+| transition | Transition | `String` | `popup-slide` |
 | get-container | Return the mount node for Popup | `String | () => HTMLElement` | - |
 
 ### Events

src/popup/README.zh-CN.md

@@ -54,6 +54,19 @@ export default {
 />
 ```
 
+### 圆角弹窗
+
+设置`round`属性后，弹窗会根据弹出位置添加不同的圆角样式
+
+```html
+<van-popup
+  v-model="show"
+  round
+  position="bottom"
+  :style="{ height: '20%' }"
+/>
+```
+
 ### 指定挂载位置
 
 弹出层默认挂载到组件所在位置，可以通过`get-container`属性指定挂载位置
@@ -97,15 +110,16 @@ export default {
 |------|------|------|------|------|
 | v-model | 当前组件是否显示 | `Boolean` | `false` | - |
 | overlay | 是否显示遮罩层 | `Boolean` | `true` | - |
-| position | 位置，可选值为 `top` `bottom` <br> `right` `left` | `String` | `center` | - |
+| position | 弹出位置，可选值为 `top` `bottom` `right` `left` | `String` | `center` | - |
 | overlay-class | 自定义遮罩层类名 | `String` | - | - |
 | overlay-style | 自定义遮罩层样式 | `Object` | - | - |
-| transition | 动画类名，用法与原生`transtion`组件的`name`属性一致 | `String` | - | - |
 | duration | 动画时长，单位秒 | `Number` | `0.3` | 2.0.0 |
-| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | - | - |
-| close-on-click-overlay | 是否在点击遮罩层后关闭 | `Boolean` | `true` | - |
+| round | 是否显示圆角 | `Boolean` | `false` | 2.0.7 |
 | lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` | - |
 | lazy-render | 是否在显示弹层时才渲染节点 | `Boolean` | `true` | - |
+| close-on-click-overlay | 是否在点击遮罩层后关闭 | `Boolean` | `true` | - |
+| transition | 动画类名，用法与 Vue 内置的`transtion`组件的`name`属性一致 | `String` | - | - |
+| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | - | - |
 
 ### Events
 

src/popup/demo/index.vue

@@ -71,6 +71,24 @@
       />
     </demo-block>
 
+    <demo-block
+      v-if="!$attrs.weapp"
+      :title="$t('roundCorner')"
+    >
+      <van-button
+        type="primary"
+        @click="showRoundCorner = true"
+      >
+        {{ $t('roundCorner') }}
+      </van-button>
+      <van-popup
+        v-model="showRoundCorner"
+        round
+        position="bottom"
+        :style="{ height: '20%' }"
+      />
+    </demo-block>
+
     <demo-block
       v-if="!$attrs.weapp"
       :title="$t('getContainer')"
@@ -100,7 +118,8 @@ export default {
       buttonBottom: '底部弹出',
       buttonLeft: '左侧弹出',
       buttonRight: '右侧弹出',
-      getContainer: '指定挂载节点'
+      getContainer: '指定挂载节点',
+      roundCorner: '圆角弹窗'
     },
     'en-US': {
       position: 'Position',
@@ -109,7 +128,8 @@ export default {
       buttonBottom: 'From Bottom',
       buttonLeft: 'From Left',
       buttonRight: 'From Right',
-      getContainer: 'Get Container'
+      getContainer: 'Get Container',
+      roundCorner: 'Round Corner'
     }
   },
 
@@ -120,6 +140,7 @@ export default {
       showBottom: false,
       showLeft: false,
       showRight: false,
+      showRoundCorner: false,
       showGetContainer: false
     };
   }

src/popup/index.js

@@ -7,6 +7,7 @@ export default createComponent({
   mixins: [PopupMixin],
 
   props: {
+    round: Boolean,
     duration: Number,
     transition: String,
     position: {
@@ -36,7 +37,7 @@ export default createComponent({
       return;
     }
 
-    const { position, duration } = this;
+    const { round, position, duration } = this;
 
     const transitionName =
       this.transition ||
@@ -56,7 +57,7 @@ export default createComponent({
         <div
           vShow={this.value}
           style={style}
-          class={bem({ [position]: position })}
+          class={bem({ round, [position]: position })}
           onClick={this.onClick}
         >
           {this.slots()}

src/popup/index.less

@@ -17,30 +17,50 @@
       top: 50%;
       left: 50%;
       transform: translate3d(-50%, -50%, 0);
+
+      &.van-popup--round {
+        border-radius: @popup-round-border-radius;
+      }
     }
 
     &--top {
       top: 0;
       left: 0;
       width: 100%;
+
+      &.van-popup--round {
+        border-radius: 0 0 @popup-round-border-radius @popup-round-border-radius;
+      }
     }
 
     &--right {
       top: 50%;
       right: 0;
       transform: translate3d(0, -50%, 0);
+
+      &.van-popup--round {
+        border-radius: @popup-round-border-radius 0 0 @popup-round-border-radius;
+      }
     }
 
     &--bottom {
       bottom: 0;
       left: 0;
       width: 100%;
+
+      &.van-popup--round {
+        border-radius: @popup-round-border-radius @popup-round-border-radius 0 0;
+      }
     }
 
     &--left {
       top: 50%;
       left: 0;
       transform: translate3d(0, -50%, 0);
+
+      &.van-popup--round {
+        border-radius: 0 @popup-round-border-radius @popup-round-border-radius 0;
+      }
     }
 
     &-slide-top-enter,

src/popup/test/__snapshots__/demo.spec.js.snap

@@ -23,6 +23,11 @@ exports[`renders demo correctly 1`] = `
     </span></button>
     <!---->
   </div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      圆角弹窗
+    </span></button>
+    <!---->
+  </div>
   <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
       指定挂载节点
     </span></button> </div>

src/popup/test/__snapshots__/index.spec.js.snap

@@ -3,3 +3,5 @@
 exports[`duration prop 1`] = `<div class="van-popup van-popup--center" style="transition-duration: 0.5s;" name="van-fade"></div>`;
 
 exports[`reset z-index 1`] = `<div class="van-popup van-popup--center" name="van-fade"></div>`;
+
+exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--center" name="van-fade"></div>`;

src/popup/test/index.spec.js

@@ -211,3 +211,14 @@ test('duration prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('round prop', () => {
+  const wrapper = mount(Popup, {
+    propsData: {
+      value: true,
+      round: true
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

src/style/var.less

@@ -389,6 +389,7 @@
 // Popup
 @popup-background-color: @white;
 @popup-transition: .3s ease-out;
+@popup-round-border-radius: 12px;
 
 // Progress
 @progress-height: 4px;