[improvement] Popup: add position default value

packages/action-sheet/index.tsx

@@ -45,7 +45,7 @@ function ActionSheet(
   function Header() {
     if (title) {
       return (
-        <div class={[bem('header'), 'van-hairline--top-bottom']}>
+        <div class={[bem('header'), 'van-hairline--bottom']}>
           {title}
           <Icon name="close" class={bem('close')} onClick={onCancel} />
         </div>

packages/popup/demo/index.vue

@@ -90,15 +90,6 @@ export default {
         }, 2000);
       }
     }
-  },
-
-  methods: {
-    showDialog() {
-      this.$dialog.confirm({
-        title: 'confirm标题',
-        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
-      });
-    }
   }
 };
 </script>
@@ -108,36 +99,25 @@ export default {
 
 .demo-popup {
   .van-button {
-    margin: 10px 0 10px 15px;
+    margin-left: 15px;
   }
 
   .van-popup {
-    width: 60%;
     padding: 20px;
     box-sizing: border-box;
 
+    &--center {
+      width: 60%;
+    }
+
     &--bottom {
       width: 100%;
       padding: 0;
-      border-radius: 0;
-    }
-
-    .van-tabs__content {
-      height: 156px;
-      overflow-y: scroll;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    .van-tab__pane:not(:first-child) {
-      padding: 10px;
-      line-height: 1.4;
-      color: @gray-darker;
     }
 
     &--top {
       color: @white;
       width: 100%;
-      border-radius: 0;
       line-height: 20px;
       background-color: rgba(0, 0, 0, 0.8);
     }

packages/popup/en-US.md

@@ -10,6 +10,7 @@ Vue.use(Popup);
 ### Usage
 
 #### Basic Usage
+
 Popup is located in the middle of the screen by default
 
 ```html
@@ -27,6 +28,7 @@ export default {
 ```
 
 #### Position
+
 Use `position` prop to set popup display position
 
 ```html
@@ -41,7 +43,7 @@ Use `position` prop to set popup display position
 |------|------|------|------|
 | v-model | Whether to show popup | `Boolean` | `false` |
 | overlay | Whether to show overlay | `Boolean` | `true` |
-| position | Can be set to `top` `bottom` `right` `left` | `String` | - |
+| 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` |

packages/popup/index.js

@@ -7,8 +7,11 @@ export default sfc({
   mixins: [PopupMixin],
 
   props: {
-    position: String,
     transition: String,
+    position: {
+      type: String,
+      default: 'center'
+    },
     overlay: {
       type: Boolean,
       default: true
@@ -26,7 +29,9 @@ export default sfc({
 
     const { position } = this;
     const emit = eventName => event => this.$emit(eventName, event);
-    const transitionName = this.transition || (position ? `van-popup-slide-${position}` : 'van-fade');
+    const transitionName =
+      this.transition ||
+      (position === 'center' ? 'van-fade' : `van-popup-slide-${position}`);
 
     return (
       <transition
@@ -34,7 +39,11 @@ export default sfc({
         onAfterEnter={emit('opened')}
         onAfterLeave={emit('closed')}
       >
-        <div vShow={this.value} class={bem({ [position]: position })} onClick={emit('click')}>
+        <div
+          vShow={this.value}
+          class={bem({ [position]: position })}
+          onClick={emit('click')}
+        >
           {this.slots()}
         </div>
       </transition>

packages/popup/index.less

@@ -7,20 +7,21 @@
 
   &-popup {
     position: fixed;
-    top: 50%;
-    left: 50%;
     max-height: 100%;
     overflow-y: auto;
     background-color: @white;
     transition: .3s ease-out;
     -webkit-overflow-scrolling: touch;
-    transform: translate3d(-50%, -50%, 0);
+
+    &--center {
+      top: 50%;
+      left: 50%;
+      transform: translate3d(-50%, -50%, 0);
+    }
 
     &--top {
       width: 100%;
       top: 0;
-      right: auto;
-      bottom: auto;
       left: 50%;
       transform: translate3d(-50%, 0, 0);
     }
@@ -28,24 +29,18 @@
     &--right {
       top: 50%;
       right: 0;
-      bottom: auto;
-      left: auto;
       transform: translate3d(0, -50%, 0);
     }
 
     &--bottom {
       width: 100%;
-      top: auto;
       bottom: 0;
-      right: auto;
       left: 50%;
       transform: translate3d(-50%, 0, 0);
     }
 
     &--left {
       top: 50%;
-      right: auto;
-      bottom: auto;
       left: 0;
       transform: translate3d(0, -50%, 0);
     }

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`reset z-index 1`] = `<div class="van-popup" name="van-fade"></div>`;
+exports[`reset z-index 1`] = `<div class="van-popup van-popup--center" name="van-fade"></div>`;

packages/popup/zh-CN.md

@@ -10,7 +10,8 @@ Vue.use(Popup);
 ### 代码演示
 
 #### 基础用法
-`popup`默认从中间弹出
+
+`Popup`默认从中间弹出
 
 ```html
 <van-popup v-model="show">内容</van-popup>
@@ -27,7 +28,8 @@ export default {
 ```
 
 #### 弹出位置
-通过`position`属性设置 Popup 弹出位置
+
+通过`position`属性设置`Popup`弹出位置
 
 ```html
 <van-popup v-model="show" position="top" :overlay="false">
@@ -41,7 +43,7 @@ export default {
 |------|------|------|------|------|
 | v-model | 当前组件是否显示 | `Boolean` | `false` | - |
 | overlay | 是否显示蒙层 | `Boolean` | `true` | - |
-| position | 位置，可选值为 `top` `bottom` <br> `right` `left` | `String` | - | - |
+| position | 位置，可选值为 `top` `bottom` <br> `right` `left` | `String` | `center` | - |
 | overlay-class | 自定义蒙层类名 | `String` | - | - |
 | overlay-style | 自定义蒙层样式 | `Object` | - | - |
 | transition | transition 名称 | `String` | - | - |