[breaking change] Popup: add lockScroll instead of lockOnScroll & preventScroll (#688)

2025-04-06 03:57:59 +08:00 · 2018-03-14 11:07:48 +08:00 · 2018-03-14 11:07:48 +08:00 · d36dd61bc9
commit d36dd61bc9
parent 7d3768591f
12 changed files with 33 additions and 61 deletions
--- a/docs/demos/views/popup.vue
+++ b/docs/demos/views/popup.vue
@ -2,21 +2,19 @@
  <demo-section>
    <demo-block :title="$t('basicUsage')">
      <van-button @click="show1 = true">{{ $t('button1') }}</van-button>
-      <van-popup v-model="show1" prevent-scroll>{{ $t('content') }}</van-popup>
+      <van-popup v-model="show1">{{ $t('content') }}</van-popup>
    </demo-block>

    <demo-block :title="$t('position')">
      <van-button @click="show2 = true;">{{ $t('button2') }}</van-button>

-      <van-popup v-model="show2" position="bottom" prevent-scroll>
+      <van-popup v-model="show2" position="bottom">
        <van-tabs>
-          <van-tab class="custom-pane" title="Tab1">
-            <ul class="scroller">
-              <li v-for="i in 30" :key="i" class="list-item">{{ i }} item item item</li>
-            </ul>
+          <van-tab title="Tab1">
+            <van-cell v-for="i in 20" :key="i" :title="`Item ${ i }`" />
          </van-tab>
-          <van-tab class="custom-pane" title="Tab2">
-            <p class="long-text">Lorem ipsum dolor sit amet, quis interdum et sollicitudin consectetuer scelerisque, gravida nulla consequatur dis mauris non morbi, dictum leo enim elementum ac wisi nullam, nam orci erat. Ultrices est. Nunc penatibus vel varius odio. Ullamcorper placerat amet amet sed, urna tempor, elit elit at. Eget congue. Sed proin metus sapien libero, pulvinar ut, ut aenean fermentum magna placerat dapibus voluptas, sed at lacinia pede fermentum rutrum et. Vitae nulla sapien vel in hac felis, montes in donec nulla eu volutpat augue.</p>
+          <van-tab title="Tab2">
+            Lorem ipsum dolor sit amet, quis interdum et sollicitudin consectetuer scelerisque, gravida nulla consequatur dis mauris non morbi, dictum leo enim elementum ac wisi nullam, nam orci erat. Ultrices est. Nunc penatibus vel varius odio. Ullamcorper placerat amet amet sed, urna tempor, elit elit at. Eget congue. Sed proin metus sapien libero, pulvinar ut, ut aenean fermentum magna placerat dapibus voluptas, sed at lacinia pede fermentum rutrum et. Vitae nulla sapien vel in hac felis, montes in donec nulla eu volutpat augue.
          </van-tab>
        </van-tabs>
      </van-popup>
@ -89,6 +87,8 @@ export default {

 <style lang="postcss">
 .demo-popup {
+  height: 10000px;
+
  .van-button {
    margin: 10px 0 10px 15px;
  }
@ -107,20 +107,15 @@ export default {
    }

    .van-tabs__content {
-      height: 166px;
+      height: 156px;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
-      .list-item {
-        padding: 10px 10px;
-        &:not(:last-child) {
-          border-bottom: 1px solid #f9f9f9;
-        }
-      }
-      .long-text {
-        padding: 10px;
-        line-height: 1.4;
-        color: #666;
-      }
+    }
+  
+    .van-tab__pane:not(:first-child) {
+      padding: 10px;
+      line-height: 1.4;
+      color: #666;
    }

    &--top {
--- a/docs/markdown/en-US/dialog.md
+++ b/docs/markdown/en-US/dialog.md
@ -76,7 +76,7 @@ export default {
 | cancelButtonText | Cancel button test | `String` | `Cancel` | - |
 | overlay | Whether to show overlay | `Boolean` | `true` | - |
 | closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` | - |
-| lockOnScroll | Whether to lock body scroll | `Boolean` | `true` | - |
+| lockScroll | Whether to lock body scroll | `Boolean` | `true` | - |

 #### Advanced Usage
 If you need to render vue components within a dialog, you can use dialog component.
@ -130,7 +130,7 @@ export default {
 | cancel-button-text | Cancel button test | `String` | `Cancel` | - |
 | overlay | Whether to show overlay | `Boolean` | `true` | - |
 | close-on-click-overlay | Whether to close when click overlay | `Boolean` | `false` | - |
-| lock-on-scroll | Whether to lock body scroll | `Boolean` | `true` | - |
+| lock-scroll | Whether to lock background scroll | `Boolean` | `true` | - |

 ### Event

--- a/docs/markdown/en-US/popup.md
+++ b/docs/markdown/en-US/popup.md
@ -41,13 +41,12 @@ Use `position` prop to set popup display position
 |-----------|-----------|-----------|-------------|-------------|
 | v-model | Whether to show popup | `Boolean` | `false` | - |
 | overlay | Whether to show overlay | `Boolean` | `true` | - |
-| lock-on-scroll | Lock body scroll | `Boolean` | `false` | - |
 | position | Position | `String` | - | `top` `bottom` `right` `left` |
 | 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` | - |
-| prevent-scroll | Prevent background scroll | `Boolean` | `false` | - |
+| lock-scroll | Whether to lock background scroll | `Boolean` | `true` | - |
 | get-container | Return the mount node for Popup | `Function` | - | `() => HTMLElement` |

 ### Event
--- a/docs/markdown/zh-CN/dialog.md
+++ b/docs/markdown/zh-CN/dialog.md
@ -77,7 +77,7 @@ export default {
 | cancelButtonText | 取消按钮的文案 | `String` | `取消` | - |
 | overlay | 是否展示蒙层 | `Boolean` | `true` | - |
 | closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - |
-| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | - |
+| lockScroll | 是否锁定背景滚动 | `Boolean` | `true` | - |


 #### 高级用法
@ -132,7 +132,7 @@ export default {
 | cancel-button-text | 取消按钮的文案 | `String` | `取消` | - |
 | overlay | 是否展示蒙层 | `Boolean` | `true` | - |
 | close-on-click-overlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - |
-| lock-on-scroll | 是否禁用背景滚动 | `Boolean` | `true` | - |
+| lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` | - |

 ### Event

--- a/docs/markdown/zh-CN/popup.md
+++ b/docs/markdown/zh-CN/popup.md
@ -41,13 +41,12 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | v-model | 当前组件是否显示 | `Boolean` | `false` | - |
 | overlay | 是否显示背景蒙层 | `Boolean` | `true` | - |
-| lock-on-scroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
+| lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` | - |
 | position | Popup 位置 | `String` | - | `top` `bottom` `right` `left` |
 | overlay-class | 自定义蒙层 class | `String` | `` | - |
 | overlay-style | 自定义蒙层样式 | `Object` | `` | - |
 | close-on-click-overlay | 点击蒙层是否关闭 Popup | `Boolean` | `true` | - |
 | transition | transition 名称 | `String` | `popup-slide` | - |
-| prevent-scroll | 是否防止滚动穿透 | `Boolean` | `false` | - |
 | get-container | 指定弹出层挂载的 HTML 节点 | `Function` | - | `() => HTMLElement` |

 ### Event
--- a/packages/dialog/dialog.vue
+++ b/packages/dialog/dialog.vue
@ -62,10 +62,6 @@ export default create({
    closeOnClickOverlay: {
      type: Boolean,
      default: false
-    },
-    lockOnScroll: {
-      type: Boolean,
-      default: true
    }
  },

--- a/packages/dialog/index.js
+++ b/packages/dialog/index.js
@ -34,7 +34,7 @@ Dialog.defaultOptions = {
  title: '',
  message: '',
  overlay: true,
-  lockOnScroll: true,
+  lockScroll: true,
  confirmButtonText: '',
  cancelButtonText: '',
  showConfirmButton: true,
--- a/packages/mixins/popup/index.js
+++ b/packages/mixins/popup/index.js
@ -17,12 +17,10 @@ export default {
    closeOnClickOverlay: Boolean,
    // z-index
    zIndex: [String, Number],
-    // prevent touchmove scroll
-    preventScroll: Boolean,
    // return the mount node for popup
    getContainer: Function,
    // prevent body scroll
-    lockOnScroll: {
+    lockScroll: {
      type: Boolean,
      default: true
    }
@ -118,20 +116,17 @@ export default {
          className: this.overlayClass,
          customStyle: this.overlayStyle
        });
+      }

-        if (this.lockOnScroll) {
-          document.body.classList.add('van-overflow-hidden');
-        }
+      if (this.lockScroll) {
+        document.body.classList.add('van-overflow-hidden');
+        on(document, 'touchstart', this.recordPosition);
+        on(document, 'touchmove', this.watchTouchMove);
      }

      this.$el.style.zIndex = context.plusKey('zIndex');
      this.$emit('input', true);
      this.opened = true;
-
-      if (this.preventScroll) {
-        on(document, 'touchstart', this.recordPosition);
-        on(document, 'touchmove', this.watchTouchMove);
-      }
    },

    close() {
@ -147,11 +142,8 @@ export default {
    doAfterClose() {
      manager.close(this._popupId);

-      if (this.lockOnScroll) {
+      if (this.lockScroll) {
        document.body.classList.remove('van-overflow-hidden');
-      }
-
-      if (this.preventScroll) {
        off(document, 'touchstart', this.recordPosition);
        off(document, 'touchmove', this.watchTouchMove);
      }
--- a/packages/popup/index.vue
+++ b/packages/popup/index.vue
@ -21,10 +21,6 @@ export default create({
      type: Boolean,
      default: true
    },
-    lockOnScroll: {
-      type: Boolean,
-      default: false
-    },
    closeOnClickOverlay: {
      type: Boolean,
      default: true
--- a/packages/sku/Sku.vue
+++ b/packages/sku/Sku.vue
@ -3,8 +3,6 @@
    v-if="!isSkuEmpty"
    v-model="show"
    position="bottom"
-    lock-on-scroll
-    prevent-scroll
    :close-on-click-overlay="closeOnClickOverlay"
    :get-container="getContainer"
  >
--- a/test/specs/popup.spec.js
+++ b/test/specs/popup.spec.js
@ -24,8 +24,7 @@ describe('Popup', () => {
      propsData: {
        value: false,
        zIndex: 100,
-        overlay: false,
-        lockOnScroll: true
+        overlay: false
      }
    });

@ -64,7 +63,6 @@ describe('Popup', () => {
  it('popup prevent scroll', (done) => {
    wrapper = mount(Popup, {
      propsData: {
-        preventScroll: true,
        value: true
      }
    });
@ -89,7 +87,6 @@ describe('Popup', () => {
  it('popup modal', (done) => {
    wrapper = mount(Popup, {
      propsData: {
-        preventScroll: true,
        value: true
      }
    });
@ -120,12 +117,12 @@ describe('Popup', () => {
    wrapper = mount(Popup, {
      propsData: {
        overlay: '',
-        lockOnScroll: '',
+        lockScroll: '',
        closeOnClickOverlay: ''
      }
    });

-    expect(wrapper.vm.lockOnScroll).to.be.true;
+    expect(wrapper.vm.lockScroll).to.be.true;
  });

  it('get container prop', done => {
--- a/types/dialog.d.ts
+++ b/types/dialog.d.ts
@ -2,7 +2,7 @@ export type DialogOptions = {
  title?: string;
  message?: string;
  overlay?: boolean;
-  lockOnScroll?: boolean;
+  lockScroll?: boolean;
  confirmButtonText?: string;
  cancelButtonText?: string;
  showConfirmButton?: boolean;