@mpxjs/webpack-plugin 2.8.40-beta.0 → 2.8.40-test.2

package/lib/runtime/components/web/getInnerListeners.js

@@ -1,8 +1,6 @@
 import { isEmptyObject } from '../../utils'
 import { isBrowser } from '../../env'
 
-const isTouchDevice = isBrowser ? document && ('ontouchstart' in document.documentElement) : true
-
 function processModel (listeners, context) {
   // 该函数只有wx:model的情况下才调用，而且默认e.detail.value有值
   // 该函数必须在产生merge前执行
@@ -49,6 +47,7 @@ function mergeListeners (listeners, otherListeners, options = {}) {
 function processTap (listeners, context) {
   const listenerMap = {}
   const tapEvents = ['tap', 'longpress', 'longtap']
+  const isTouchDevice = isBrowser ? document && ('ontouchstart' in document.documentElement) : true
   tapEvents.forEach((eventName) => {
     if (listeners[eventName]) {
       listenerMap[eventName] = true
@@ -144,20 +143,8 @@ export function inheritEvent (type, oe, detail = {}) {
 }
 
 export function getCustomEvent (type, detail = {}, target = null) {
-  const targetInfo = {}
-  if (target) {
-    const targetEl = target.$el || {}
-    const info = {
-      id: targetEl.id || '',
-      dataset: targetEl.dataset || {},
-      offsetTop: targetEl.offsetTop || 0,
-      offsetLeft: targetEl.offsetLeft || 0
-    }
-    Object.assign(targetInfo, {
-      target: info,
-      currentTarget: info
-    })
-  }
+  const targetEl = (target && target.$el) || null
+  const targetInfo = targetEl ? { target: targetEl, currentTarget: targetEl } : {}
   return {
     type,
     detail,

package/lib/runtime/components/web/mpx-image.vue

@@ -1,5 +1,6 @@
 <script>
   import getInnerListeners, { getCustomEvent } from './getInnerListeners'
+  import { isBrowser } from '../../env'
 
   export default {
     name: 'mpx-image',
@@ -21,21 +22,23 @@
       }
     },
     beforeCreate () {
-      this.image = new Image()
-      this.image.onload = () => {
-        this.$emit('load', getCustomEvent('load', {
-          width: this.image.width,
-          height: this.image.height
-        }, this))
-      }
-      this.image.onerror = () => {
-        this.$emit('error', getCustomEvent('error', {}, this))
+      if (isBrowser) {
+        this.image = new Image()
+        this.image.onload = () => {
+          this.$emit('load', getCustomEvent('load', {
+            width: this.image.width,
+            height: this.image.height
+          }, this))
+        }
+        this.image.onerror = () => {
+          this.$emit('error', getCustomEvent('error', {}, this))
+        }
       }
     },
     watch: {
       src: {
         handler (src) {
-          if (src) this.image.src = src
+          if (src && this.image) this.image.src = src
         },
         immediate: true
       }

package/lib/runtime/components/web/mpx-keep-alive.vue

@@ -30,9 +30,7 @@
   }
 
   function getVnodeKey (vnode) {
-    if (vnode && vnode.componentOptions) {
-      return vnode.componentOptions.Ctor.cid + (vnode.componentOptions.tag ? ('::' + (vnode.componentOptions.tag)) : '')
-    }
+    return vnode.tag + (vnode.key ? `::${vnode.key}` : '')
   }
 
   export default {
@@ -44,12 +42,13 @@
       if (!isBrowser) {
         return vnode || (slot && slot[0])
       }
-      const vnodeKey = getVnodeKey(vnode)
       const router = global.__mpxRouter
-      if (vnodeKey && router && vnode.data.routerView) {
+      if (router) {
+        // 存在routeCount的情况下修改vnode.key避免patch时复用旧节点实例
+        if (router.currentRoute.query.routeCount) vnode.key = router.currentRoute.query.routeCount
+        const vnodeKey = getVnodeKey(vnode)
         if (router.needCache) {
           router.needCache.vnode = vnode
-          router.needCache.vnodeKey = vnodeKey
           router.needCache = null
         }
 
@@ -65,29 +64,23 @@
             removeItem.vnode.componentInstance.$destroy()
           }
         })
+        // 在执行完destroy后再同步lastStack信息，让用户在destroy钩子中还能够访问到销毁之前的页面栈，与小程序保持一致
+        router.lastStack = router.stack.slice()
         router.needRemove.length = 0
 
         const stack = router.stack
         if (stack.length) {
-          // 只要历史栈缓存中存在对应的页面存活实例，就进行复用
+          // 只要历史栈缓存中存在对应的页面存活实例且vnodeKey相同，就进行复用
           for (let i = stack.length; i > 0; i--) {
             const current = stack[i - 1]
-            if (current.vnode && current.vnodeKey === vnodeKey && current.vnode.componentInstance) {
+            if (current.vnode && getVnodeKey(current.vnode) === vnodeKey && current.vnode.componentInstance) {
               vnode.componentInstance = current.vnode.componentInstance
-              // 避免组件实例复用但是vnode.key不一致带来的bad case
-              vnode.key = current.vnode.key
               break
             }
           }
         }
 
-        if (router.__mpxAction) {
-          if (router.__mpxAction.type === 'reLaunch') {
-            // reLaunch时修改新vnode的key, 确保任何情况下都新创建组件实例
-            vnode.key = (vnode.key || '') + router.__mpxAction.reLaunchCount
-          }
-          router.__mpxAction = null
-        }
+        if (router.__mpxAction) router.__mpxAction = null
         vnode.data.keepAlive = true
       }
 

package/lib/runtime/components/web/mpx-movable-view.vue

@@ -1,19 +1,21 @@
 <template>
-    <div class="mpx-movable-scroll-content" ref="scrollContent">
-        <div class="mpx-movable-scroll-item">
-            <slot></slot>
-        </div>
+  <div class="mpx-movable-scroll-content" ref="scrollContent">
+    <div class="mpx-movable-scroll-item">
+      <slot></slot>
     </div>
+  </div>
 </template>
 
 <script type="text/ecmascript-6">
-  import {getCustomEvent} from './getInnerListeners'
+  import {getCustomEvent, extendEvent} from './getInnerListeners'
   import BScroll from '@better-scroll/core'
   import Movable from '@better-scroll/movable'
+  import ObserveDOM from '@better-scroll/observe-dom'
   import Zoom from '@better-scroll/zoom'
 
   BScroll.use(Movable)
   BScroll.use(Zoom)
+  BScroll.use(ObserveDOM)
 
   export default {
     data () {
@@ -23,6 +25,8 @@
         maxScrollX: 0,
         minScrollY: 0,
         maxScrollY: 0,
+        currentX: this.x,
+        currentY: this.y,
         lastestX: 0,
         lastestY: 0,
         lastestScale: 1,
@@ -30,7 +34,10 @@
         isZooming: false,
         isFirstTouch: true,
         source: '',
-        touchEvent: ''
+        touchEvent: '',
+        isInited: false,
+        deactivatedX: 0,
+        deactivatedY: 0
       }
     },
     props: {
@@ -89,7 +96,13 @@
       speed: {
         type: Number,
         default: 1000
-      }
+      },
+      scrollOptions: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      },
     },
     watch: {
       x (newVal) {
@@ -100,6 +113,7 @@
         if (newVal < this.bs.maxScrollX) {
           newVal = this.bs.maxScrollX
         }
+        this.currentX = newVal
         this.bs.scrollTo(newVal, this.bs.y, this.speed)
       },
       y (newVal) {
@@ -110,6 +124,7 @@
         if (newVal < this.bs.maxScrollY) {
           newVal = this.bs.maxScrollY
         }
+        this.currentY = newVal
         this.bs.scrollTo(this.bs.x, newVal, this.speed)
       },
       scaleValue (newVal) {
@@ -121,16 +136,61 @@
           newVal = 0.5
         }
         this.bs.zoomTo(newVal, 'center', 'center')
+      },
+      disabled () {
+        this.init()
       }
     },
     mounted () {
+      if (!this.scrollOptions.closeResizeObserver) {
+        this.createResizeObserver()
+      }
       this.init()
     },
+    activated () {
+      if (this.deactivatedX || this.deactivatedY) {
+        this.refresh()
+        this.bs.putAt(this.deactivatedX, this.deactivatedY, 0)
+      }
+    },
+    deactivated () {
+      // when the hook is triggered
+      // bs will recalculate the boundary of movable to 0
+      // so record the position of the movable
+      this.deactivatedX = this.bs.x
+      this.deactivatedY = this.bs.y
+    },
     beforeDestroy () {
-      this.bs && this.bs.destroy()
+      this.destroyBs()
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
+        this.resizeObserver = null
+      }
     },
     methods: {
+      createResizeObserver () {
+        if (typeof ResizeObserver !== 'undefined') {
+          this.resizeObserver = new ResizeObserver(entries => {
+            if (!this.isInited) {
+              this.isInited = true
+              return
+            }
+            this.refresh()
+          })
+          const elementToObserve = document.querySelector('.mpx-movable-scroll-content')
+          elementToObserve && this.resizeObserver.observe(elementToObserve)
+        }
+      },
+      refresh () {
+        this.bs && this.bs.refresh()
+      },
+      destroyBs () {
+        if (!this.bs) return
+        this.bs.destroy()
+        delete this.bs
+      },
       init () {
+        this.destroyBs()
         if (!this.$refs.scrollContent.parentNode || (this.$refs.scrollContent.parentNode && this.$refs.scrollContent.parentNode.className !== 'mpx-movable-scroll-wrapper')) {
           return
         }
@@ -143,8 +203,8 @@
           scrollX: false,
           scrollY: false,
           movable: true,
-          startX: this.x,
-          startY: this.y,
+          startX: this.currentX,
+          startY: this.currentY,
           bounce: this.outOfBounds,
           bounceTime: 800 / (this.damping / 20),
           probeType: 3,
@@ -153,7 +213,7 @@
         const BehaviorHooks = this.bs.scroller.scrollBehaviorY.hooks
         const actionsHandlerHooks = this.bs.scroller.actionsHandler.hooks
         const scrollerHooks = this.bs.scroller.hooks
-        this.bs.putAt(this.x, this.y, 0)
+        this.bs.putAt(this.currentX, this.currentY, 0)
         this.lastestX = this.roundFun(this.x)
         this.lastestY = this.roundFun(this.y)
         this.lastestScale = this.roundFun(this.scaleValue)
@@ -184,6 +244,10 @@
           this.lastestX = this.roundFun(position.x)
           this.lastestY = this.roundFun(position.y)
         })
+        scrollerHooks.on('scrollEnd', (position) =>{
+          this.currentX = this.bs.x
+          this.currentY = this.bs.y
+        })
         scrollerHooks.on('touchEnd', (position) => {
           this.isFirstTouch = true
           if (position.x > this.minScrollX || position.x < this.maxScrollX ||
@@ -204,6 +268,14 @@
             this.bs.movingDirectionY = -1
           }
         })
+        actionsHandlerHooks.on('start', (e) => {
+          extendEvent(e, { detail: Object.assign({}, e.detail) })
+          this.$emit('touchstart', e)
+        })
+        actionsHandlerHooks.on('end', (e) => {
+          extendEvent(e, { detail: Object.assign({}, e.detail) })
+          this.$emit('touchend', e)
+        })
         actionsHandlerHooks.on('move', ({ deltaX, deltaY, e }) => {
           if (this.isZooming) {
             return
@@ -215,7 +287,9 @@
               this.touchEvent = 'vtouchmove'
             }
           }
-          this.$emit(this.touchEvent, getCustomEvent(this.touchEvent, {}, this))
+          extendEvent(e, { detail: Object.assign({}, e.detail), currentTarget: e.target })
+          this.$emit(this.touchEvent, e)
+          this.$emit('touchmove', e)
           this.isFirstTouch = false
         })
         if (this.inertia) { // movable-view是否带有惯性
@@ -240,9 +314,6 @@
             this.isZooming = false
           })
         }
-        if (this.disabled) { // 禁用
-          this.bs.disable()
-        }
       },
       initOptions () {
         if (!this.friction || this.friction < 0) {
@@ -273,19 +344,24 @@
             swipeTime: 50
           }
         }
-        if (this.direction === 'vertical') {
+        if (this.disabled) {
+          this.bsOptions = {
+            ...this.bsOptions,
+            freeScroll: false,
+            scrollY: false,
+            scrollX: false
+          }
+        } else if (this.direction === 'vertical') {
           this.bsOptions = {
             ...this.bsOptions,
             scrollY: true
           }
-        }
-        if (this.direction === 'horizontal') {
+        } else if (this.direction === 'horizontal') {
           this.bsOptions = {
             ...this.bsOptions,
             scrollX: true
           }
-        }
-        if (this.direction === 'all') {
+        } else if (this.direction === 'all') {
           this.bsOptions = {
             ...this.bsOptions,
             freeScroll: true,
@@ -293,6 +369,10 @@
             scrollY: true
           }
         }
+        this.bsOptions = {
+          ...this.bsOptions,
+          ...this.scrollOptions
+        }
       },
       // 处理小数点，四舍五入，默认保留一位小数
       roundFun(value, n = 1) {
@@ -302,7 +382,9 @@
   }
 </script>
 <style lang="stylus" rel="stylesheet/stylus" scoped>
-    .mpx-movable-scroll-content {
-        position: absolute
-    }
+  .mpx-movable-scroll-content
+    position: absolute
+    .mpx-movable-scroll-item
+      width: 100%
+      height: 100%
 </style>

package/lib/runtime/components/web/mpx-picker-view-column.vue

@@ -15,7 +15,13 @@
   export default {
     name: 'mpx-picker-view-column',
     props: {
-      value: Array
+      value: Array,
+      scrollOptions: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      }
     },
     data() {
       return {
@@ -64,7 +70,9 @@
               rotate: -5,
               wheelWrapperClass: 'wheel-scroll'
             },
-            probeType: 3
+            probeType: 3,
+            bindToWrapper: true,
+            ...this.scrollOptions
           })
           this.wheels[0].on('scrollStart', function () {
             if (this.pickerView) {

package/lib/runtime/components/web/mpx-picker-view.vue

@@ -163,7 +163,7 @@
     height: 100%
     overflow: hidden
     text-align: center
-    font-size: 14px
+    font-size: 16px
     position: relative
 
     &.mpx-picker-fade-enter, &.mpx-picker-fade-leave-active

package/lib/runtime/components/web/mpx-picker.vue

@@ -138,6 +138,12 @@
       fields: {
         type: String,
         default: 'day'
+      },
+      scrollOptions: {
+        type: Object,
+        default: () => {
+          return {}
+        }
       }
     },
     data () {
@@ -311,7 +317,9 @@
                     wheelWrapperClass: 'wheel-scroll',
                     wheelItemClass: 'wheel-item'
                   },
-                  probeType: 3
+                  probeType: 3,
+                  bindToWrapper: true,
+                  ...this.scrollOptions
                 })
                 if (this.mode === 'time' || this.mode === 'date') {
                   this.wheels[i].on('scrollStart', function (i) {

package/lib/runtime/components/web/mpx-scroll-view.vue

@@ -30,7 +30,12 @@
         type: [Number, String],
         default: 0
       },
-      scrollOptions: Object,
+      scrollOptions: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      },
       updateRefresh: {
         type: Boolean,
         default: true
@@ -57,15 +62,23 @@
     data () {
       return {
         isLoading: false,
-        isAutoPullDown: true
+        isAutoPullDown: true,
+        currentX: 0,
+        currentY: 0,
+        lastX: 0,
+        lastY: 0
       }
     },
     computed: {
       _scrollTop () {
-        return processSize(this.scrollTop)
+        const size = processSize(this.scrollTop)
+        this.currentY = size
+        return size
       },
       _scrollLeft () {
-        return processSize(this.scrollLeft)
+        const size = processSize(this.scrollLeft)
+        this.currentX = size
+        return size
       },
       _lowerThreshold () {
         return processSize(this.lowerThreshold)
@@ -87,10 +100,13 @@
           className += ' active'
         }
         return className
+      },
+      scroll() {
+        return this.scrollX || this.scrollY
       }
     },
     mounted () {
-      this.init()
+      this.initBs()
     },
     activated () {
       if (!this.__mpx_deactivated) {
@@ -106,14 +122,14 @@
       this.__mpx_deactivated = true
     },
     beforeDestroy () {
-      this.destroy()
+      this.destroyBs()
     },
     updated () {
       if (this.updateRefresh) this.refresh()
     },
     watch: {
       scrollIntoView (val) {
-        this.bs && this.bs.scrollToElement('#' + val, this.scrollWithAnimation ? 200 : 0)
+        this.scrollToView(val, this.scrollWithAnimation ? 200 : 0)
       },
       _scrollTop (val) {
         this.bs && this.bs.scrollTo(this.bs.x, -val, this.scrollWithAnimation ? 200 : 0)
@@ -136,20 +152,33 @@
             }
           }
         },
+      },
+      scroll(val) {
+        if (val) {
+          this.initBs()
+        } else {
+          this.disableBs()
+        }
       }
     },
     methods: {
-      destroy () {
+      destroyBs () {
         if (!this.bs) return
         this.bs.destroy()
         delete this.bs
       },
-      init () {
-        if (this.bs) return
+      disableBs() {
+        if (!this.bs) return
+        this.bs.disable()
+        this.currentX = -this.bs.x
+        this.currentY = -this.bs.y
+      },
+      initBs () {
+        this.destroyBs()
         this.initLayerComputed()
         const originBsOptions = {
-          startX: -this._scrollLeft,
-          startY: -this._scrollTop,
+          startX: -this.currentX,
+          startY: -this.currentY,
           scrollX: this.scrollX,
           scrollY: this.scrollY,
           probeType: 3,
@@ -170,8 +199,8 @@
         this.bs.scroller.hooks.on('beforeRefresh', () => {
           this.initLayerComputed()
         })
-        this.lastX = -this._scrollLeft
-        this.lastY = -this._scrollTop
+        this.lastX = -this.currentX
+        this.lastY = -this.currentY
         this.bs.on('scroll', throttle(({ x, y }) => {
           const deltaX = x - this.lastX
           const deltaY = y - this.lastY
@@ -201,9 +230,11 @@
           leading: true,
           trailing: false
         }))
-        if (this.scrollIntoView) {
-          this.bs.scrollToElement('#' + this.scrollIntoView)
-        }
+        this.bs.on('scrollEnd', () => {
+          this.currentX = -this.bs.x
+          this.currentY = -this.bs.y
+        })
+        if (this.scrollIntoView) this.scrollToView(this.scrollIntoView)
         // 若开启自定义下拉刷新 或 开启 scroll-view 增强特性
         if (this.refresherEnabled || this.enhanced) {
           const actionsHandlerHooks = this.bs.scroller.actionsHandler.hooks
@@ -258,12 +289,19 @@
           }
         }
       },
+      scrollToView (id, duration = 0) {
+        if (!id) return
+        id = '#' + id
+        if (!document.querySelector(id)) return // 不存在元素时阻断，直接调用better-scroll的方法会报错
+        this.bs?.scrollToElement(id, duration)
+      },
       initLayerComputed () {
         const wrapper = this.$refs.wrapper
-        const wrapperWidth = wrapper.offsetWidth
-        const wrapperHeight = wrapper.offsetHeight
-        this.$refs.innerWrapper.style.width = `${wrapperWidth}px`
-        this.$refs.innerWrapper.style.height = `${wrapperHeight}px`
+        const computedStyle = getComputedStyle(wrapper)
+        // 考虑子元素样式可能会设置100%，如果直接继承 scrollContent 的样式可能会有问题
+        // 所以使用 wrapper 作为 innerWrapper 的宽高参考依据
+        this.$refs.innerWrapper.style.width = `${wrapper.clientWidth -  parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight)}px`
+        this.$refs.innerWrapper.style.height = `${wrapper.clientHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom)}px`
         const innerWrapper = this.$refs.innerWrapper
         const childrenArr = Array.from(innerWrapper.children)
 
@@ -342,7 +380,11 @@
             class: 'circle circle-c'
           }),
         ]
-      ) : null
+      ) : this.$slots.refresher
+        ? createElement('div', {
+          class: 'mpx-pull-down-slot',
+        }, this.$slots.refresher)
+        : null
 
       const pullDownWrapper = this.refresherEnabled ? createElement('div', {
         class: 'mpx-pull-down-wrapper',
@@ -376,7 +418,11 @@
         bottom: 20px
         left: 50%
         transform: translateX(-50%)
-
+      .mpx-pull-down-slot
+        position: absolute
+        width: 100%
+        height: auto
+        bottom: 0
       .mpx-pull-down-content-black
         .circle
           display: inline-block;