[new feature] Popup: support getContaienr (#611)

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
 

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` |

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
 

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
 

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` |

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
 

packages/actionsheet/index.vue

@@ -60,10 +60,6 @@ export default create({
     }
   },
 
-  mounted() {
-    this.value && this.open();
-  },
-
   methods: {
     onClickItem(item) {
       if (typeof item.callback === 'function') {

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
   },
 

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);
+      }
+    }
   }
 };

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 });

packages/picker/PickerColumn.vue

@@ -13,6 +13,7 @@
       <li
         v-for="(option, index) in options"
         v-text="getOptionText(option)"
+        class="van-ellipsis"
         :class="{
           'van-picker-column--disabled': isDisabled(option),
           'van-picker-column--selected': index === currentIndex

packages/picker/index.vue

@@ -3,8 +3,8 @@
     <div class="van-picker__toolbar van-hairline--top-bottom" v-if="showToolbar">
       <slot>
         <div class="van-picker__cancel" @click="emit('cancel')">{{ cancelButtonText || $t('cancel') }}</div>
+        <div class="van-picker__title van-ellipsis" v-if="title" v-text="title" />
         <div class="van-picker__confirm" @click="emit('confirm')">{{ confirmButtonText || $t('confirm') }}</div>
-        <div class="van-picker__title" v-if="title" v-text="title" />
       </slot>
     </div>
     <div class="van-picker__columns" @touchmove.prevent>

packages/popup/index.vue

@@ -41,12 +41,6 @@ export default create({
       currentValue: false,
       currentTransition: transition
     };
-  },
-
-  mounted() {
-    if (this.value) {
-      this.open();
-    }
   }
 });
 </script>

packages/sku/Sku.vue

@@ -1,5 +1,12 @@
 <template>
-  <popup v-model="show" v-if="!isSkuEmpty" position="bottom" lock-on-scroll prevent-scroll>
+  <popup
+    v-if="!isSkuEmpty"
+    v-model="show"
+    position="bottom"
+    lock-on-scroll
+    prevent-scroll
+    :get-container="getContainer"
+  >
     <div class="van-sku-container">
       <div class="van-sku-layout">
         <!-- sku-header -->
@@ -134,6 +141,7 @@ export default create({
     goodsId: [Number, String],
     stepperTitle: String,
     hideStock: Boolean,
+    getContainer: Function,
     resetStepperOnHide: Boolean,
     resetSelectedSkuOnHide: Boolean,
     disableStepperInput: Boolean,

packages/sku/components/SkuHeader.vue

@@ -4,7 +4,7 @@
       <img class="van-sku__goods-img" :src="goodsImg" >
     </div>
     <div class="van-sku-header__goods-info">
-      <div class="van-sku__goods-name">{{ goods.title }}</div>
+      <div class="van-sku__goods-name van-ellipsis">{{ goods.title }}</div>
       <div class="van-sku__goods-price"><span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ price }}</span></div>
       <span class="van-sku__close-icon" @click="skuEventBus.$emit('sku:close')" />
     </div>

packages/steps/index.vue

@@ -8,7 +8,7 @@
       </div>
       <div class="van-steps__message">
         <div class="van-steps__title" v-text="title" />
-        <div class="van-steps__desc" v-text="description" />
+        <div class="van-steps__desc van-ellipsis" v-text="description" />
       </div>
       <slot name="message-extra" />
     </div>

packages/tabs/index.vue

@@ -22,7 +22,7 @@
           @click="onClick(index)"
         >
           <van-node v-if="tab.$slots.title" :node="tab.$slots.title" />
-          <span v-else>{{ tab.title }}</span>
+          <span class="van-ellipsis" v-else>{{ tab.title }}</span>
         </div>
       </div>
     </div>

packages/tree-select/index.vue

@@ -3,7 +3,7 @@
     <div class="van-tree-select__nav">
       <div
         v-for="(item, index) in items"
-        class="van-tree-select__nitem"
+        class="van-tree-select__nitem van-ellipsis"
         :class="{ 'van-tree-select__nitem--active': mainActiveIndex === index }"
         @click="$emit('navclick', index)">
         {{ item.text }}
@@ -13,7 +13,7 @@
       <div
         v-for="item in subItems"
         :key="item.id"
-        class="van-tree-select__item"
+        class="van-tree-select__item van-ellipsis"
         :class="{ 'van-tree-select__item--active': activeId === item.id }"
         @click="onItemSelect(item)">
         {{ item.text }}

packages/vant-css/src/base.css

@@ -4,5 +4,6 @@
 
 @import "./common/var.css";
 @import "./common/normalize.css";
+@import "./common/ellipsis.css";
 @import "./common/hairline.css";
 @import "./common/animation.css";

packages/vant-css/src/common/ellipsis.css

@@ -0,0 +1,5 @@
+@import '../mixins/ellipsis.css';
+
+.van-ellipsis {
+  @mixin ellipsis;
+}

packages/vant-css/src/picker.css

@@ -1,5 +1,4 @@
 @import './common/var.css';
-@import './mixins/ellipsis.css';
 
 .van-picker {
   overflow: hidden;
@@ -24,8 +23,8 @@
   }
 
   &__title {
+    max-width: 50%;
     text-align: center;
-    @mixin ellipsis;
   }
 
   &__columns {
@@ -46,13 +45,12 @@
   &-column {
     flex: 1;
     overflow: hidden;
-    font-size: 16px;
+    font-size: 17px;
     text-align: center;
 
     li {
       padding: 0 5px;
       color: $gray-darker;
-      @mixin ellipsis;
     }
 
     li&--selected {

packages/vant-css/src/sku.css

@@ -67,9 +67,6 @@
 
   &__goods-name {
     font-size: 12px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   &__price-symbol {

packages/vant-css/src/steps.css

@@ -1,5 +1,4 @@
 @import './common/var.css';
-@import './mixins/ellipsis.css';
 
 .van-steps {
   overflow: hidden;
@@ -49,7 +48,6 @@
     font-size: 12px;
     line-height: 1.5;
     color: $gray-dark;
-    @mixin ellipsis;
   }
 }
 

packages/vant-css/src/tab.css

@@ -1,5 +1,4 @@
 @import './common/var.css';
-@import './mixins/ellipsis.css';
 
 $van-tabs-line-height: 44px;
 $van-tabs-card-height: 30px;
@@ -118,7 +117,6 @@ $van-tabs-card-height: 30px;
 
   span {
     display: block;
-    @mixin ellipsis;
   }
 
   &:active {

packages/vant-css/src/tree-select.css

@@ -22,7 +22,6 @@
     line-height: 44px;
     padding: 0 15px;
     background-color: $white;
-    @mixin ellipsis;
 
     &--active {
       background-color: $background-color;
@@ -41,7 +40,6 @@
     line-height: 44px;
     padding-left: 5px;
     padding-right: 18px;
-    @mixin ellipsis;
     
     &--active {
       color: $button-danger-background-color;

test/unit/specs/popup.spec.js

@@ -22,7 +22,10 @@ describe('Popup', () => {
   it('create a show popup', (done) => {
     wrapper = mount(Popup, {
       propsData: {
-        value: false
+        value: false,
+        zIndex: 100,
+        overlay: false,
+        lockOnScroll: true
       }
     });
 
@@ -125,4 +128,23 @@ describe('Popup', () => {
 
     expect(wrapper.vm.lockOnScroll).to.be.true;
   });
+
+  it('get container prop', done => {
+    const testNode = document.createElement('div');
+    document.body.appendChild(testNode);
+
+    wrapper = mount(Popup, {
+      propsData: {
+        getContainer: () => testNode
+      }
+    });
+
+    expect(wrapper.vm.$el.parentNode === testNode).to.be.true;
+    wrapper.vm.getContainer = () => document.body;
+
+    setTimeout(() => {
+      expect(wrapper.vm.$el.parentNode === document.body).to.be.true;
+      done();
+    }, 100);
+  });
 });