@mpxjs/webpack-plugin 2.10.7-beta.8 → 2.10.7-beta.9

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

@@ -1,4 +1,5 @@
 <script>
+  import { computed } from 'vue'
   import getInnerListeners, { getCustomEvent } from './getInnerListeners'
   import { processSize } from '../../utils'
   import BScroll from '@better-scroll/core'
@@ -60,12 +61,8 @@
     },
     provide () {
       return {
-        scrollOffset: {
-          get: () => this.lastY
-        },
-        refreshVersion: {
-          get: () => this.refreshVersion
-        }
+        scrollOffset: computed(() => -this.lastY || 0),
+        refreshVersion: computed(() => this.refreshVersion || 0)
       }
     },
     data () {
@@ -342,7 +339,6 @@
         const scrollWrapperHeight = wrapper?.clientHeight || 0
         if (wrapper) {
           const computedStyle = getComputedStyle(wrapper)
-          this.refreshVersion = this.refreshVersion + 1
           // 考虑子元素样式可能会设置100%，如果直接继承 scrollContent 的样式可能会有问题
           // 所以使用 wrapper 作为 innerWrapper 的宽高参考依据
           this.$refs.innerWrapper.style.width = `${scrollWrapperWidth - parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight)}px`
@@ -408,6 +404,7 @@
           this.lastContentHeight = scrollContentHeight
           this.lastWrapperWidth = scrollWrapperWidth
           this.lastWrapperHeight = scrollWrapperHeight
+          this.refreshVersion++
           if (this.bs) this.bs.refresh()
         }
       },

package/lib/runtime/components/web/mpx-sticky-header.vue

@@ -6,10 +6,11 @@ import { getCustomEvent } from './getInnerListeners'
     name: 'mpx-sticky-header',
     inject: ['scrollOffset', 'refreshVersion'],
     props: {
-      'offsetTop': {
+      offsetTop: {
         type: Number,
         default: 0
-      }
+      },
+      padding: Array
     },
     data() {
       return {
@@ -17,16 +18,8 @@ import { getCustomEvent } from './getInnerListeners'
         isStickOnTop: false
       }
     },
-    computed: {
-      _scrollOffset() {
-        return -this.scrollOffset?.get() || 0
-      },
-      _refreshVersion() {
-        return this.refreshVersion?.get() || 0
-      }
-    },
     watch: {
-      _scrollOffset: {
+      scrollOffset: {
         handler(newScrollOffset) {
           const newIsStickOnTop = newScrollOffset > this.headerTop
           if (newIsStickOnTop !== this.isStickOnTop) {
@@ -35,19 +28,25 @@ import { getCustomEvent } from './getInnerListeners'
               isStickOnTop: newIsStickOnTop
             }, this))
           }
-          const stickyHeader = this.$refs.stickyHeader
-          if (!stickyHeader) return
-          if (this.isStickOnTop) {
-            stickyHeader.style.transform = `translateY(${newScrollOffset - this.headerTop + this.offsetTop}px)`
-          } else {
-            stickyHeader.style.transform = 'none'
-          }
+
+          this.setTransformStyle()
         },
         immediate: true
       },
-      _refreshVersion: {
+      refreshVersion: {
         handler() {
-          const parentElement = this.$el.parentElement
+          this.setHeaderTop()
+          this.setTransformStyle()
+        },
+      }
+    },
+    mounted() {
+      this.setPaddingStyle()
+      this.setHeaderTop()
+    },
+    methods: {
+      setHeaderTop () {
+        const parentElement = this.$el.parentElement
           if (!parentElement) return
           
           const parentClass = parentElement.className || ''
@@ -58,20 +57,29 @@ import { getCustomEvent } from './getInnerListeners'
             warn('sticky-header only supports being a direct child of a scroll-view or sticky-section component.')
             return
           }
-          
           this.headerTop = isStickySection 
             ? this.$el.offsetTop + parentElement.offsetTop
             : this.$el.offsetTop
-          
-          const stickyHeader = this.$refs.stickyHeader
-          if (!stickyHeader) return
-          
-          if (this._scrollOffset > this.headerTop) {
-            stickyHeader.style.transform = `translateY(${this._scrollOffset - this.headerTop + this.offsetTop}px)`
-          } else {
-            stickyHeader.style.transform = 'none'
-          }
-        },
+      },
+      setPaddingStyle() {
+        const stickyHeader = this.$refs.stickyHeader
+        if (!stickyHeader) return
+        
+        if (this.padding && Array.isArray(this.padding)) {
+          const [top = 0, right = 0, bottom = 0, left = 0] = this.padding
+          stickyHeader.style.padding = `${top}px ${right}px ${bottom}px ${left}px`
+        }
+      },
+      setTransformStyle () {
+        const stickyHeader = this.$refs.stickyHeader
+        if (!stickyHeader) return
+        
+        // 设置 transform
+        if (this.scrollOffset > this.headerTop) {
+          stickyHeader.style.transform = `translateY(${this.scrollOffset - this.headerTop + this.offsetTop}px)`
+        } else {
+          stickyHeader.style.transform = 'none'
+        }
       }
     },
     render(h) {

package/lib/template-compiler/bind-this.js

@@ -2,6 +2,7 @@ const babylon = require('@babel/parser')
 const traverse = require('@babel/traverse').default
 const t = require('@babel/types')
 const generate = require('@babel/generator').default
+const isValidIdentifierStr = require('../utils/is-valid-identifier-str')
 
 const names = 'Infinity,undefined,NaN,isFinite,isNaN,' +
   'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
@@ -41,7 +42,7 @@ function getCollectPath (path) {
     if (current.node.computed) {
       if (t.isLiteral(current.node.property)) {
         if (t.isStringLiteral(current.node.property)) {
-          if (dangerousKeyMap[current.node.property.value]) {
+          if (dangerousKeyMap[current.node.property.value] || !isValidIdentifierStr(current.node.property.value)) {
             break
           }
           keyPath += `.${current.node.property.value}`

package/lib/template-compiler/compiler.js

@@ -1849,7 +1849,7 @@ function processRefReact (el, meta) {
     }])
   }
 
-  if (el.tag === 'mpx-scroll-view' && el.attrsMap['scroll-into-view']) {
+  if (el.tag === 'mpx-scroll-view') {
     addAttrs(el, [
       {
         name: '__selectRef',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.7-beta.8",
+  "version": "2.10.7-beta.9",
   "description": "mpx compile core",
   "keywords": [
     "mpx"