diff --git a/packages/action-sheet/index.tsx b/packages/action-sheet/index.tsx index a525a7afb..a087c52de 100644 --- a/packages/action-sheet/index.tsx +++ b/packages/action-sheet/index.tsx @@ -45,7 +45,7 @@ function ActionSheet( function Header() { if (title) { return ( -
+
{title}
diff --git a/packages/popup/demo/index.vue b/packages/popup/demo/index.vue index d6f5fec9a..36f7c380b 100644 --- a/packages/popup/demo/index.vue +++ b/packages/popup/demo/index.vue @@ -90,15 +90,6 @@ export default { }, 2000); } } - }, - - methods: { - showDialog() { - this.$dialog.confirm({ - title: 'confirm标题', - message: '弹窗提示文字,左右始终距离边20PX,上下距离20PX,文字左对齐。弹窗提示文字,左右始终距离边20PX,上下距离20PX,文字左对齐。' - }); - } } }; @@ -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); } diff --git a/packages/popup/en-US.md b/packages/popup/en-US.md index ceda3380a..622c32ee0 100644 --- a/packages/popup/en-US.md +++ b/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` | diff --git a/packages/popup/index.js b/packages/popup/index.js index 571c3ba55..3043f6dbc 100644 --- a/packages/popup/index.js +++ b/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 ( -
+
{this.slots()}
diff --git a/packages/popup/index.less b/packages/popup/index.less index e52f89c60..20ecf87f7 100644 --- a/packages/popup/index.less +++ b/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); } diff --git a/packages/popup/test/__snapshots__/index.spec.js.snap b/packages/popup/test/__snapshots__/index.spec.js.snap index 27fb27639..697eb56f1 100644 --- a/packages/popup/test/__snapshots__/index.spec.js.snap +++ b/packages/popup/test/__snapshots__/index.spec.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`reset z-index 1`] = `
`; +exports[`reset z-index 1`] = `
`; diff --git a/packages/popup/zh-CN.md b/packages/popup/zh-CN.md index 6cc9b8cdb..c484276cc 100644 --- a/packages/popup/zh-CN.md +++ b/packages/popup/zh-CN.md @@ -10,7 +10,8 @@ Vue.use(Popup); ### 代码演示 #### 基础用法 -`popup`默认从中间弹出 + +`Popup`默认从中间弹出 ```html 内容 @@ -27,7 +28,8 @@ export default { ``` #### 弹出位置 -通过`position`属性设置 Popup 弹出位置 + +通过`position`属性设置`Popup`弹出位置 ```html @@ -41,7 +43,7 @@ export default { |------|------|------|------|------| | v-model | 当前组件是否显示 | `Boolean` | `false` | - | | overlay | 是否显示蒙层 | `Boolean` | `true` | - | -| position | 位置,可选值为 `top` `bottom`
`right` `left` | `String` | - | - | +| position | 位置,可选值为 `top` `bottom`
`right` `left` | `String` | `center` | - | | overlay-class | 自定义蒙层类名 | `String` | - | - | | overlay-style | 自定义蒙层样式 | `Object` | - | - | | transition | transition 名称 | `String` | - | - |