diff --git a/docs/markdown/en-US/actionsheet.md b/docs/markdown/en-US/actionsheet.md index 4bc0502c5..6a58204ed 100644 --- a/docs/markdown/en-US/actionsheet.md +++ b/docs/markdown/en-US/actionsheet.md @@ -61,6 +61,7 @@ Actionsheet will get another style if there is a `title` prop. | cancel-text | Text of cancel button | `String` | - | - | | overlay | Whether to show overlay | `Boolean` | - | - | | close-on-click-overlay | Whether to close when click overlay | `Boolean` | - | - | +| get-container | Return the mount node for actionsheet | `Function` | - | `() => HTMLElement` | ### Data struct of actions diff --git a/docs/markdown/en-US/popup.md b/docs/markdown/en-US/popup.md index a87291505..4c7474c94 100644 --- a/docs/markdown/en-US/popup.md +++ b/docs/markdown/en-US/popup.md @@ -48,3 +48,4 @@ Use `position` prop to set popup display position | close-on-click-overlay | Close popup when click overlay | `Boolean` | `true` | - | | transition | Transition | `String` | `popup-slide` | - | | prevent-scroll | Prevent background scroll | `Boolean` | `false` | - | +| get-container | Return the mount node for Popup | `Function` | - | `() => HTMLElement` | diff --git a/docs/markdown/en-US/sku.md b/docs/markdown/en-US/sku.md index 3c35d5bf3..d2b99a8c8 100644 --- a/docs/markdown/en-US/sku.md +++ b/docs/markdown/en-US/sku.md @@ -90,6 +90,7 @@ Vue.use(Sku); | disable-stepper-input | Whether to disable stepper input | `Boolean` | `false` | - | | stepper-title | Quantity title | `String` | `Quantity` | - | | custom-stepper-config | Custom stepper related config | `Object` | `{}` | - | +| get-container | Return the mount node for sku | `Function` | - | `() => HTMLElement` | ### Event diff --git a/docs/markdown/zh-CN/actionsheet.md b/docs/markdown/zh-CN/actionsheet.md index 310808041..a91d53b94 100644 --- a/docs/markdown/zh-CN/actionsheet.md +++ b/docs/markdown/zh-CN/actionsheet.md @@ -72,6 +72,7 @@ export default { | cancel-text | 取消按钮文案 | `String` | - | - | | overlay | 是否显示遮罩 | `Boolean` | - | - | | close-on-click-overlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - | +| get-container | 指定挂载的 HTML 节点 | `Function` | - | `() => HTMLElement` | ### actions diff --git a/docs/markdown/zh-CN/popup.md b/docs/markdown/zh-CN/popup.md index e0ed9e492..47b33a47b 100644 --- a/docs/markdown/zh-CN/popup.md +++ b/docs/markdown/zh-CN/popup.md @@ -48,3 +48,4 @@ export default { | close-on-click-overlay | 点击蒙层是否关闭 Popup | `Boolean` | `true` | - | | transition | transition 名称 | `String` | `popup-slide` | - | | prevent-scroll | 是否防止滚动穿透 | `Boolean` | `false` | - | +| get-container | 指定弹出层挂载的 HTML 节点 | `Function` | - | `() => HTMLElement` | diff --git a/docs/markdown/zh-CN/sku.md b/docs/markdown/zh-CN/sku.md index 21b4f3a19..a2f616d9b 100644 --- a/docs/markdown/zh-CN/sku.md +++ b/docs/markdown/zh-CN/sku.md @@ -91,6 +91,7 @@ Vue.use(Sku); | disable-stepper-input | 是否禁用sku中stepper的input框 | `Boolean` | `false` | - | | stepper-title | 数量选择组件左侧文案 | `String` | `购买数量` | - | | custom-stepper-config | 步进器相关自定义配置 | `Object` | `{}` | - | +| get-container | 指定挂载的 HTML 节点 | `Function` | - | `() => HTMLElement` | ### Event diff --git a/packages/actionsheet/index.vue b/packages/actionsheet/index.vue index ec1333ffa..0cc15f580 100644 --- a/packages/actionsheet/index.vue +++ b/packages/actionsheet/index.vue @@ -60,10 +60,6 @@ export default create({ } }, - mounted() { - this.value && this.open(); - }, - methods: { onClickItem(item) { if (typeof item.callback === 'function') { diff --git a/packages/coupon-list/index.vue b/packages/coupon-list/index.vue index b3dddeda5..a2e40cc17 100644 --- a/packages/coupon-list/index.vue +++ b/packages/coupon-list/index.vue @@ -53,7 +53,6 @@ import Cell from '../cell'; import CellGroup from '../cell-group'; import CouponItem from './Item'; import Field from '../field'; -import Popup from '../popup'; import VanButton from '../button'; export default create({ @@ -64,7 +63,6 @@ export default create({ Cell, CellGroup, Field, - Popup, CouponItem }, diff --git a/packages/mixins/popup/index.js b/packages/mixins/popup/index.js index 7b51213ea..399f38edf 100644 --- a/packages/mixins/popup/index.js +++ b/packages/mixins/popup/index.js @@ -19,6 +19,8 @@ export default { zIndex: [String, Number], // prevent touchmove scroll preventScroll: Boolean, + // return the mount node for popup + getContainer: Function, // prevent body scroll lockOnScroll: { type: Boolean, @@ -26,17 +28,8 @@ export default { } }, - watch: { - value(val) { - this[val ? 'open' : 'close'](); - } - }, - - beforeMount() { - this._popupId = 'popup-' + context.plusKey('idSeed'); - }, - data() { + this._popupId = 'popup-' + context.plusKey('idSeed'); return { opened: false, pos: { @@ -46,6 +39,29 @@ export default { }; }, + watch: { + value(val) { + this[val ? 'open' : 'close'](); + }, + + getContainer() { + this.move(); + } + }, + + mounted() { + if (this.getContainer) { + this.move(); + } + if (this.value) { + this.open(); + } + }, + + beforeDestroy() { + this.doAfterClose(); + }, + methods: { recordPosition(e) { this.pos = { @@ -65,12 +81,14 @@ export default { let status = '11'; + /* istanbul ignore next */ if (scrollTop === 0) { status = offsetHeight >= scrollHeight ? '00' : '01'; } else if (scrollTop + offsetHeight >= scrollHeight) { status = '10'; } + /* istanbul ignore next */ if ( status !== '11' && isVertical && @@ -82,6 +100,7 @@ export default { }, open() { + /* istanbul ignore next */ if (this.opened || this.$isServer) { return; } @@ -137,10 +156,14 @@ export default { off(document, 'touchstart', this.recordPosition); off(document, 'touchmove', this.watchTouchMove); } - } - }, + }, - beforeDestroy() { - this.doAfterClose(); + move() { + if (this.getContainer) { + this.getContainer().appendChild(this.$el); + } else if (this.$parent) { + this.$parent.$el.appendChild(this.$el); + } + } } }; diff --git a/packages/mixins/popup/manager.js b/packages/mixins/popup/manager.js index 319c8da89..bf2e1c104 100644 --- a/packages/mixins/popup/manager.js +++ b/packages/mixins/popup/manager.js @@ -41,6 +41,7 @@ const manager = { const { id, dom } = config; const exist = context.stack.some(item => item.id === id); + /* istanbul ignore next */ if (!exist) { const targetNode = dom && dom.parentNode && dom.parentNode.nodeType !== 11 ? dom.parentNode : document.body; context.stack.push({ instance, id, config, targetNode }); diff --git a/packages/picker/PickerColumn.vue b/packages/picker/PickerColumn.vue index 365973601..97e6da7e1 100644 --- a/packages/picker/PickerColumn.vue +++ b/packages/picker/PickerColumn.vue @@ -13,6 +13,7 @@
  • {{ cancelButtonText || $t('cancel') }}
    +
    {{ confirmButtonText || $t('confirm') }}
    -
    diff --git a/packages/popup/index.vue b/packages/popup/index.vue index 9700ce2ce..a6291cfa5 100644 --- a/packages/popup/index.vue +++ b/packages/popup/index.vue @@ -41,12 +41,6 @@ export default create({ currentValue: false, currentTransition: transition }; - }, - - mounted() { - if (this.value) { - this.open(); - } } }); diff --git a/packages/sku/Sku.vue b/packages/sku/Sku.vue index 7d503a2ab..828b46589 100644 --- a/packages/sku/Sku.vue +++ b/packages/sku/Sku.vue @@ -1,5 +1,12 @@