@mpxjs/webpack-plugin 2.8.59 → 2.8.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.js +3 -3
- package/lib/platform/template/wx/index.js +13 -2
- package/lib/runtime/components/web/mpx-keep-alive.vue +2 -0
- package/lib/runtime/components/web/mpx-movable-view.vue +78 -20
- package/lib/runtime/components/web/mpx-scroll-view.vue +44 -14
- package/lib/runtime/components/web/mpx-swiper.vue +146 -61
- package/lib/runtime/optionProcessor.js +1 -0
- package/lib/template-compiler/bind-this.js +17 -8
- package/lib/template-compiler/compiler.js +7 -5
- package/lib/template-compiler/index.js +29 -25
- package/lib/web/processScript.js +3 -2
- package/package.json +2 -2
package/lib/index.js
CHANGED
|
@@ -125,7 +125,6 @@ class MpxWebpackPlugin {
|
|
|
125
125
|
options.resolveMode = options.resolveMode || 'webpack'
|
|
126
126
|
options.writeMode = options.writeMode || 'changed'
|
|
127
127
|
options.autoScopeRules = options.autoScopeRules || {}
|
|
128
|
-
options.renderOptimizeRules = options.renderOptimizeRules || {}
|
|
129
128
|
options.autoVirtualHostRules = options.autoVirtualHostRules || {}
|
|
130
129
|
options.forceDisableProxyCtor = options.forceDisableProxyCtor || false
|
|
131
130
|
options.transMpxRules = options.transMpxRules || {
|
|
@@ -169,7 +168,8 @@ class MpxWebpackPlugin {
|
|
|
169
168
|
}, options.nativeConfig)
|
|
170
169
|
options.webConfig = options.webConfig || {}
|
|
171
170
|
options.partialCompile = options.mode !== 'web' && options.partialCompile
|
|
172
|
-
options.asyncSubpackageRules = options.asyncSubpackageRules ||
|
|
171
|
+
options.asyncSubpackageRules = options.asyncSubpackageRules || []
|
|
172
|
+
options.optimizeRenderRules = options.optimizeRenderRules || {}
|
|
173
173
|
options.retryRequireAsync = options.retryRequireAsync || false
|
|
174
174
|
options.enableAliRequireAsync = options.enableAliRequireAsync || false
|
|
175
175
|
options.optimizeSize = options.optimizeSize || false
|
|
@@ -633,13 +633,13 @@ class MpxWebpackPlugin {
|
|
|
633
633
|
appTitle: 'Mpx homepage',
|
|
634
634
|
attributes: this.options.attributes,
|
|
635
635
|
externals: this.options.externals,
|
|
636
|
-
renderOptimizeRules: this.options.renderOptimizeRules,
|
|
637
636
|
useRelativePath: this.options.useRelativePath,
|
|
638
637
|
removedChunks: [],
|
|
639
638
|
forceProxyEventRules: this.options.forceProxyEventRules,
|
|
640
639
|
enableRequireAsync: this.options.mode === 'wx' || (this.options.mode === 'ali' && this.options.enableAliRequireAsync),
|
|
641
640
|
partialCompile: this.options.partialCompile,
|
|
642
641
|
asyncSubpackageRules: this.options.asyncSubpackageRules,
|
|
642
|
+
optimizeRenderRules: this.options.optimizeRenderRules,
|
|
643
643
|
pathHash: (resourcePath) => {
|
|
644
644
|
if (this.options.pathHashMode === 'relative' && this.options.projectRoot) {
|
|
645
645
|
return hash(path.relative(this.options.projectRoot, resourcePath))
|
|
@@ -358,7 +358,7 @@ module.exports = function getSpec ({ warn, error }) {
|
|
|
358
358
|
value
|
|
359
359
|
}
|
|
360
360
|
},
|
|
361
|
-
web ({ name, value }, { eventRules, el }) {
|
|
361
|
+
web ({ name, value }, { eventRules, el, usingComponents }) {
|
|
362
362
|
if (parseMustache(value).hasBinding) {
|
|
363
363
|
error('Web environment does not support mustache binding in event props!')
|
|
364
364
|
return
|
|
@@ -370,10 +370,11 @@ module.exports = function getSpec ({ warn, error }) {
|
|
|
370
370
|
const meta = {
|
|
371
371
|
modifierStr
|
|
372
372
|
}
|
|
373
|
+
const isComponent = usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component'
|
|
373
374
|
// 记录event监听信息用于后续判断是否需要使用内置基础组件
|
|
374
375
|
el.hasEvent = true
|
|
375
376
|
const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'web', meta })
|
|
376
|
-
const rEventName = runRules(eventRules, eventName, { mode: 'web' })
|
|
377
|
+
const rEventName = runRules(eventRules, eventName, { mode: 'web', data: { isComponent } })
|
|
377
378
|
return {
|
|
378
379
|
name: rPrefix + rEventName + meta.modifierStr,
|
|
379
380
|
value
|
|
@@ -456,6 +457,16 @@ module.exports = function getSpec ({ warn, error }) {
|
|
|
456
457
|
error(`Web environment does not support [${eventName}] event!`)
|
|
457
458
|
}
|
|
458
459
|
}
|
|
460
|
+
},
|
|
461
|
+
// 特殊web事件
|
|
462
|
+
{
|
|
463
|
+
test: /^click$/,
|
|
464
|
+
web (eventName, data) {
|
|
465
|
+
// 自定义组件根节点
|
|
466
|
+
if (data.isComponent) {
|
|
467
|
+
return '_' + eventName
|
|
468
|
+
}
|
|
469
|
+
}
|
|
459
470
|
}
|
|
460
471
|
]
|
|
461
472
|
}
|
|
@@ -10,10 +10,12 @@
|
|
|
10
10
|
import {getCustomEvent, extendEvent} from './getInnerListeners'
|
|
11
11
|
import BScroll from '@better-scroll/core'
|
|
12
12
|
import Movable from '@better-scroll/movable'
|
|
13
|
+
import ObserveDOM from '@better-scroll/observe-dom'
|
|
13
14
|
import Zoom from '@better-scroll/zoom'
|
|
14
15
|
|
|
15
16
|
BScroll.use(Movable)
|
|
16
17
|
BScroll.use(Zoom)
|
|
18
|
+
BScroll.use(ObserveDOM)
|
|
17
19
|
|
|
18
20
|
export default {
|
|
19
21
|
data () {
|
|
@@ -23,6 +25,8 @@
|
|
|
23
25
|
maxScrollX: 0,
|
|
24
26
|
minScrollY: 0,
|
|
25
27
|
maxScrollY: 0,
|
|
28
|
+
currentX: this.x,
|
|
29
|
+
currentY: this.y,
|
|
26
30
|
lastestX: 0,
|
|
27
31
|
lastestY: 0,
|
|
28
32
|
lastestScale: 1,
|
|
@@ -30,7 +34,10 @@
|
|
|
30
34
|
isZooming: false,
|
|
31
35
|
isFirstTouch: true,
|
|
32
36
|
source: '',
|
|
33
|
-
touchEvent: ''
|
|
37
|
+
touchEvent: '',
|
|
38
|
+
isInited: false,
|
|
39
|
+
deactivatedX: 0,
|
|
40
|
+
deactivatedY: 0
|
|
34
41
|
}
|
|
35
42
|
},
|
|
36
43
|
props: {
|
|
@@ -89,7 +96,8 @@
|
|
|
89
96
|
speed: {
|
|
90
97
|
type: Number,
|
|
91
98
|
default: 1000
|
|
92
|
-
}
|
|
99
|
+
},
|
|
100
|
+
scrollOptions: Object
|
|
93
101
|
},
|
|
94
102
|
watch: {
|
|
95
103
|
x (newVal) {
|
|
@@ -100,6 +108,7 @@
|
|
|
100
108
|
if (newVal < this.bs.maxScrollX) {
|
|
101
109
|
newVal = this.bs.maxScrollX
|
|
102
110
|
}
|
|
111
|
+
this.currentX = newVal
|
|
103
112
|
this.bs.scrollTo(newVal, this.bs.y, this.speed)
|
|
104
113
|
},
|
|
105
114
|
y (newVal) {
|
|
@@ -110,6 +119,7 @@
|
|
|
110
119
|
if (newVal < this.bs.maxScrollY) {
|
|
111
120
|
newVal = this.bs.maxScrollY
|
|
112
121
|
}
|
|
122
|
+
this.currentY = newVal
|
|
113
123
|
this.bs.scrollTo(this.bs.x, newVal, this.speed)
|
|
114
124
|
},
|
|
115
125
|
scaleValue (newVal) {
|
|
@@ -122,22 +132,60 @@
|
|
|
122
132
|
}
|
|
123
133
|
this.bs.zoomTo(newVal, 'center', 'center')
|
|
124
134
|
},
|
|
125
|
-
disabled (
|
|
126
|
-
|
|
127
|
-
this.bs && this.bs.disable()
|
|
128
|
-
} else {
|
|
129
|
-
this.bs && this.bs.enable()
|
|
130
|
-
}
|
|
135
|
+
disabled () {
|
|
136
|
+
this.init()
|
|
131
137
|
}
|
|
132
138
|
},
|
|
133
139
|
mounted () {
|
|
140
|
+
if (!this.scrollOptions.closeResizeObserver) {
|
|
141
|
+
this.createResizeObserver()
|
|
142
|
+
}
|
|
134
143
|
this.init()
|
|
135
144
|
},
|
|
145
|
+
activated () {
|
|
146
|
+
if (this.deactivatedX || this.deactivatedY) {
|
|
147
|
+
this.refresh()
|
|
148
|
+
this.bs.putAt(this.deactivatedX, this.deactivatedY, 0)
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
deactivated () {
|
|
152
|
+
// when the hook is triggered
|
|
153
|
+
// bs will recalculate the boundary of movable to 0
|
|
154
|
+
// so record the position of the movable
|
|
155
|
+
this.deactivatedX = this.bs.x
|
|
156
|
+
this.deactivatedY = this.bs.y
|
|
157
|
+
},
|
|
136
158
|
beforeDestroy () {
|
|
137
|
-
this.
|
|
159
|
+
this.destroyBs()
|
|
160
|
+
if (this.resizeObserver) {
|
|
161
|
+
this.resizeObserver.disconnect()
|
|
162
|
+
this.resizeObserver = null
|
|
163
|
+
}
|
|
138
164
|
},
|
|
139
165
|
methods: {
|
|
166
|
+
createResizeObserver () {
|
|
167
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
168
|
+
this.resizeObserver = new ResizeObserver(entries => {
|
|
169
|
+
if (!this.isInited) {
|
|
170
|
+
this.isInited = true
|
|
171
|
+
return
|
|
172
|
+
}
|
|
173
|
+
this.refresh()
|
|
174
|
+
})
|
|
175
|
+
const elementToObserve = document.querySelector('.mpx-movable-scroll-content')
|
|
176
|
+
this.resizeObserver.observe(elementToObserve)
|
|
177
|
+
}
|
|
178
|
+
},
|
|
179
|
+
refresh () {
|
|
180
|
+
this.bs && this.bs.refresh()
|
|
181
|
+
},
|
|
182
|
+
destroyBs () {
|
|
183
|
+
if (!this.bs) return
|
|
184
|
+
this.bs.destroy()
|
|
185
|
+
delete this.bs
|
|
186
|
+
},
|
|
140
187
|
init () {
|
|
188
|
+
this.destroyBs()
|
|
141
189
|
if (!this.$refs.scrollContent.parentNode || (this.$refs.scrollContent.parentNode && this.$refs.scrollContent.parentNode.className !== 'mpx-movable-scroll-wrapper')) {
|
|
142
190
|
return
|
|
143
191
|
}
|
|
@@ -150,8 +198,8 @@
|
|
|
150
198
|
scrollX: false,
|
|
151
199
|
scrollY: false,
|
|
152
200
|
movable: true,
|
|
153
|
-
startX: this.
|
|
154
|
-
startY: this.
|
|
201
|
+
startX: this.currentX,
|
|
202
|
+
startY: this.currentY,
|
|
155
203
|
bounce: this.outOfBounds,
|
|
156
204
|
bounceTime: 800 / (this.damping / 20),
|
|
157
205
|
probeType: 3,
|
|
@@ -160,7 +208,7 @@
|
|
|
160
208
|
const BehaviorHooks = this.bs.scroller.scrollBehaviorY.hooks
|
|
161
209
|
const actionsHandlerHooks = this.bs.scroller.actionsHandler.hooks
|
|
162
210
|
const scrollerHooks = this.bs.scroller.hooks
|
|
163
|
-
this.bs.putAt(this.
|
|
211
|
+
this.bs.putAt(this.currentX, this.currentY, 0)
|
|
164
212
|
this.lastestX = this.roundFun(this.x)
|
|
165
213
|
this.lastestY = this.roundFun(this.y)
|
|
166
214
|
this.lastestScale = this.roundFun(this.scaleValue)
|
|
@@ -191,6 +239,10 @@
|
|
|
191
239
|
this.lastestX = this.roundFun(position.x)
|
|
192
240
|
this.lastestY = this.roundFun(position.y)
|
|
193
241
|
})
|
|
242
|
+
scrollerHooks.on('scrollEnd', (position) =>{
|
|
243
|
+
this.currentX = this.bs.x
|
|
244
|
+
this.currentY = this.bs.y
|
|
245
|
+
})
|
|
194
246
|
scrollerHooks.on('touchEnd', (position) => {
|
|
195
247
|
this.isFirstTouch = true
|
|
196
248
|
if (position.x > this.minScrollX || position.x < this.maxScrollX ||
|
|
@@ -257,9 +309,6 @@
|
|
|
257
309
|
this.isZooming = false
|
|
258
310
|
})
|
|
259
311
|
}
|
|
260
|
-
if (this.disabled) { // 禁用
|
|
261
|
-
this.bs.disable()
|
|
262
|
-
}
|
|
263
312
|
},
|
|
264
313
|
initOptions () {
|
|
265
314
|
if (!this.friction || this.friction < 0) {
|
|
@@ -290,19 +339,24 @@
|
|
|
290
339
|
swipeTime: 50
|
|
291
340
|
}
|
|
292
341
|
}
|
|
293
|
-
if (this.
|
|
342
|
+
if (this.disabled) {
|
|
343
|
+
this.bsOptions = {
|
|
344
|
+
...this.bsOptions,
|
|
345
|
+
freeScroll: false,
|
|
346
|
+
scrollY: false,
|
|
347
|
+
scrollX: false
|
|
348
|
+
}
|
|
349
|
+
} else if (this.direction === 'vertical') {
|
|
294
350
|
this.bsOptions = {
|
|
295
351
|
...this.bsOptions,
|
|
296
352
|
scrollY: true
|
|
297
353
|
}
|
|
298
|
-
}
|
|
299
|
-
if (this.direction === 'horizontal') {
|
|
354
|
+
} else if (this.direction === 'horizontal') {
|
|
300
355
|
this.bsOptions = {
|
|
301
356
|
...this.bsOptions,
|
|
302
357
|
scrollX: true
|
|
303
358
|
}
|
|
304
|
-
}
|
|
305
|
-
if (this.direction === 'all') {
|
|
359
|
+
} else if (this.direction === 'all') {
|
|
306
360
|
this.bsOptions = {
|
|
307
361
|
...this.bsOptions,
|
|
308
362
|
freeScroll: true,
|
|
@@ -310,6 +364,10 @@
|
|
|
310
364
|
scrollY: true
|
|
311
365
|
}
|
|
312
366
|
}
|
|
367
|
+
this.bsOptions = {
|
|
368
|
+
...this.bsOptions,
|
|
369
|
+
...this.scrollOptions
|
|
370
|
+
}
|
|
313
371
|
},
|
|
314
372
|
// 处理小数点,四舍五入,默认保留一位小数
|
|
315
373
|
roundFun(value, n = 1) {
|
|
@@ -57,15 +57,23 @@
|
|
|
57
57
|
data () {
|
|
58
58
|
return {
|
|
59
59
|
isLoading: false,
|
|
60
|
-
isAutoPullDown: true
|
|
60
|
+
isAutoPullDown: true,
|
|
61
|
+
currentX: 0,
|
|
62
|
+
currentY: 0,
|
|
63
|
+
lastX: 0,
|
|
64
|
+
lastY: 0
|
|
61
65
|
}
|
|
62
66
|
},
|
|
63
67
|
computed: {
|
|
64
68
|
_scrollTop () {
|
|
65
|
-
|
|
69
|
+
const size = processSize(this.scrollTop)
|
|
70
|
+
this.currentY = size
|
|
71
|
+
return size
|
|
66
72
|
},
|
|
67
73
|
_scrollLeft () {
|
|
68
|
-
|
|
74
|
+
const size = processSize(this.scrollLeft)
|
|
75
|
+
this.currentX = size
|
|
76
|
+
return size
|
|
69
77
|
},
|
|
70
78
|
_lowerThreshold () {
|
|
71
79
|
return processSize(this.lowerThreshold)
|
|
@@ -87,10 +95,13 @@
|
|
|
87
95
|
className += ' active'
|
|
88
96
|
}
|
|
89
97
|
return className
|
|
98
|
+
},
|
|
99
|
+
scroll() {
|
|
100
|
+
return this.scrollX || this.scrollY
|
|
90
101
|
}
|
|
91
102
|
},
|
|
92
103
|
mounted () {
|
|
93
|
-
this.
|
|
104
|
+
this.initBs()
|
|
94
105
|
},
|
|
95
106
|
activated () {
|
|
96
107
|
if (!this.__mpx_deactivated) {
|
|
@@ -106,7 +117,7 @@
|
|
|
106
117
|
this.__mpx_deactivated = true
|
|
107
118
|
},
|
|
108
119
|
beforeDestroy () {
|
|
109
|
-
this.
|
|
120
|
+
this.destroyBs()
|
|
110
121
|
},
|
|
111
122
|
updated () {
|
|
112
123
|
if (this.updateRefresh) this.refresh()
|
|
@@ -136,20 +147,33 @@
|
|
|
136
147
|
}
|
|
137
148
|
}
|
|
138
149
|
},
|
|
150
|
+
},
|
|
151
|
+
scroll(val) {
|
|
152
|
+
if (val) {
|
|
153
|
+
this.initBs()
|
|
154
|
+
} else {
|
|
155
|
+
this.disableBs()
|
|
156
|
+
}
|
|
139
157
|
}
|
|
140
158
|
},
|
|
141
159
|
methods: {
|
|
142
|
-
|
|
160
|
+
destroyBs () {
|
|
143
161
|
if (!this.bs) return
|
|
144
162
|
this.bs.destroy()
|
|
145
163
|
delete this.bs
|
|
146
164
|
},
|
|
147
|
-
|
|
148
|
-
if (this.bs) return
|
|
165
|
+
disableBs() {
|
|
166
|
+
if (!this.bs) return
|
|
167
|
+
this.bs.disable()
|
|
168
|
+
this.currentX = -this.bs.x
|
|
169
|
+
this.currentY = -this.bs.y
|
|
170
|
+
},
|
|
171
|
+
initBs () {
|
|
172
|
+
this.destroyBs()
|
|
149
173
|
this.initLayerComputed()
|
|
150
174
|
const originBsOptions = {
|
|
151
|
-
startX: -this.
|
|
152
|
-
startY: -this.
|
|
175
|
+
startX: -this.currentX,
|
|
176
|
+
startY: -this.currentY,
|
|
153
177
|
scrollX: this.scrollX,
|
|
154
178
|
scrollY: this.scrollY,
|
|
155
179
|
probeType: 3,
|
|
@@ -170,8 +194,8 @@
|
|
|
170
194
|
this.bs.scroller.hooks.on('beforeRefresh', () => {
|
|
171
195
|
this.initLayerComputed()
|
|
172
196
|
})
|
|
173
|
-
this.lastX = -this.
|
|
174
|
-
this.lastY = -this.
|
|
197
|
+
this.lastX = -this.currentX
|
|
198
|
+
this.lastY = -this.currentY
|
|
175
199
|
this.bs.on('scroll', throttle(({ x, y }) => {
|
|
176
200
|
const deltaX = x - this.lastX
|
|
177
201
|
const deltaY = y - this.lastY
|
|
@@ -201,6 +225,10 @@
|
|
|
201
225
|
leading: true,
|
|
202
226
|
trailing: false
|
|
203
227
|
}))
|
|
228
|
+
this.bs.on('scrollEnd', () => {
|
|
229
|
+
this.currentX = -this.bs.x
|
|
230
|
+
this.currentY = -this.bs.y
|
|
231
|
+
})
|
|
204
232
|
if (this.scrollIntoView) this.scrollToView(this.scrollIntoView)
|
|
205
233
|
// 若开启自定义下拉刷新 或 开启 scroll-view 增强特性
|
|
206
234
|
if (this.refresherEnabled || this.enhanced) {
|
|
@@ -265,8 +293,10 @@
|
|
|
265
293
|
initLayerComputed () {
|
|
266
294
|
const wrapper = this.$refs.wrapper
|
|
267
295
|
const computedStyle = getComputedStyle(wrapper)
|
|
268
|
-
|
|
269
|
-
|
|
296
|
+
// 考虑子元素样式可能会设置100%,如果直接继承 scrollContent 的样式可能会有问题
|
|
297
|
+
// 所以使用 wrapper 作为 innerWrapper 的宽高参考依据
|
|
298
|
+
this.$refs.innerWrapper.style.width = `${wrapper.clientWidth - parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight)}px`
|
|
299
|
+
this.$refs.innerWrapper.style.height = `${wrapper.clientHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom)}px`
|
|
270
300
|
const innerWrapper = this.$refs.innerWrapper
|
|
271
301
|
const childrenArr = Array.from(innerWrapper.children)
|
|
272
302
|
|
|
@@ -2,9 +2,12 @@
|
|
|
2
2
|
import getInnerListeners, { getCustomEvent } from './getInnerListeners'
|
|
3
3
|
import BScroll from '@better-scroll/core'
|
|
4
4
|
import Slide from '@better-scroll/slide'
|
|
5
|
+
import ObserveDOM from '@better-scroll/observe-dom'
|
|
5
6
|
import throttle from 'lodash/throttle'
|
|
7
|
+
import { processSize } from '../../utils'
|
|
6
8
|
|
|
7
9
|
BScroll.use(Slide)
|
|
10
|
+
BScroll.use(ObserveDOM)
|
|
8
11
|
|
|
9
12
|
export default {
|
|
10
13
|
name: 'mpx-swiper',
|
|
@@ -37,13 +40,16 @@
|
|
|
37
40
|
type: String,
|
|
38
41
|
default: 'default'
|
|
39
42
|
},
|
|
43
|
+
previousMargin: String,
|
|
44
|
+
nextMargin: String,
|
|
40
45
|
scrollOptions: Object
|
|
41
46
|
},
|
|
42
47
|
data () {
|
|
43
48
|
return {
|
|
44
49
|
currentIndex: this.current,
|
|
45
50
|
currentChildLength: 0,
|
|
46
|
-
lastChildLength: 0
|
|
51
|
+
lastChildLength: 0,
|
|
52
|
+
init: false
|
|
47
53
|
}
|
|
48
54
|
},
|
|
49
55
|
computed: {
|
|
@@ -81,13 +87,20 @@
|
|
|
81
87
|
default:
|
|
82
88
|
return
|
|
83
89
|
}
|
|
84
|
-
}
|
|
90
|
+
},
|
|
91
|
+
_previousMargin () {
|
|
92
|
+
return processSize(this.previousMargin) || 0
|
|
93
|
+
},
|
|
94
|
+
_nextMargin () {
|
|
95
|
+
return processSize(this.nextMargin) || 0
|
|
96
|
+
},
|
|
85
97
|
},
|
|
86
98
|
updated () {
|
|
87
|
-
this.
|
|
99
|
+
this.setCurrentChildLength()
|
|
88
100
|
},
|
|
89
101
|
watch: {
|
|
90
102
|
current (val) {
|
|
103
|
+
this.currentIndex = val
|
|
91
104
|
if (this.bs) {
|
|
92
105
|
this.lastX = this.bs.x
|
|
93
106
|
this.lastY = this.bs.y
|
|
@@ -95,7 +108,7 @@
|
|
|
95
108
|
this.changeSource = ''
|
|
96
109
|
this.goto(val)
|
|
97
110
|
},
|
|
98
|
-
currentChildLength(val) {
|
|
111
|
+
currentChildLength (val) {
|
|
99
112
|
if (val < this.lastChildLength && val < this.currentIndex) {
|
|
100
113
|
this.goto(0, 0)
|
|
101
114
|
}
|
|
@@ -119,65 +132,128 @@
|
|
|
119
132
|
this.itemIds = []
|
|
120
133
|
},
|
|
121
134
|
mounted () {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
scrollY: this.vertical,
|
|
125
|
-
slide: {
|
|
126
|
-
loop: this.circular,
|
|
127
|
-
threshold: 0.5,
|
|
128
|
-
speed: this.duration,
|
|
129
|
-
easing: this.easing,
|
|
130
|
-
interval: this.interval,
|
|
131
|
-
autoplay: this.autoplay,
|
|
132
|
-
startPageXIndex: this.vertical ? 0 : this.current,
|
|
133
|
-
startPageYIndex: this.vertical? this.current : 0
|
|
134
|
-
},
|
|
135
|
-
momentum: false,
|
|
136
|
-
bounce: false,
|
|
137
|
-
probeType: 3,
|
|
138
|
-
stopPropagation: true
|
|
135
|
+
if (!this.scrollOptions.closeResizeObserver) {
|
|
136
|
+
this.createResizeObserver()
|
|
139
137
|
}
|
|
140
|
-
|
|
141
|
-
this.
|
|
142
|
-
this.bs.on('slideWillChange', (page) => {
|
|
143
|
-
this.currentIndex = this.vertical ? page.pageY : page.pageX
|
|
144
|
-
this.$emit('change', getCustomEvent('change', {
|
|
145
|
-
current: this.currentIndex,
|
|
146
|
-
currentItemId: this.itemIds[this.currentIndex] || '',
|
|
147
|
-
source: this.changeSource
|
|
148
|
-
}, this))
|
|
149
|
-
})
|
|
150
|
-
|
|
151
|
-
this.bs.on('scrollEnd', () => {
|
|
152
|
-
this.$emit('animationfinish', getCustomEvent('animationfinish', {
|
|
153
|
-
current: this.currentIndex,
|
|
154
|
-
currentItemId: this.itemIds[this.currentIndex] || '',
|
|
155
|
-
source: this.changeSource
|
|
156
|
-
}, this))
|
|
157
|
-
})
|
|
158
|
-
this.bs.on('scroll', throttle(({ x, y }) => {
|
|
159
|
-
this.$emit('transition', getCustomEvent('transition', {
|
|
160
|
-
dx: this.lastX - x,
|
|
161
|
-
dy: this.lastY - y
|
|
162
|
-
}, this))
|
|
163
|
-
}, 30, {
|
|
164
|
-
leading: true,
|
|
165
|
-
trailing: false
|
|
166
|
-
}))
|
|
167
|
-
|
|
168
|
-
this.bs.on('beforeScrollStart', () => {
|
|
169
|
-
if (this.bs) {
|
|
170
|
-
this.lastX = this.bs.x
|
|
171
|
-
this.lastY = this.bs.y
|
|
172
|
-
}
|
|
173
|
-
this.changeSource = 'touch'
|
|
174
|
-
})
|
|
138
|
+
this.setCurrentChildLength()
|
|
139
|
+
this.initBs()
|
|
175
140
|
},
|
|
176
141
|
beforeDestroy () {
|
|
177
|
-
this.
|
|
178
|
-
|
|
142
|
+
this.destroyBs()
|
|
143
|
+
if (this.resizeObserver) {
|
|
144
|
+
this.resizeObserver.disconnect()
|
|
145
|
+
this.resizeObserver = null
|
|
146
|
+
}
|
|
179
147
|
},
|
|
180
148
|
methods: {
|
|
149
|
+
destroyBs () {
|
|
150
|
+
if (!this.bs) return
|
|
151
|
+
this.bs.destroy()
|
|
152
|
+
delete this.bs
|
|
153
|
+
},
|
|
154
|
+
initLayerComputed () {
|
|
155
|
+
const wrapper = this.$refs.wrapper
|
|
156
|
+
const computedStyle = getComputedStyle(wrapper)
|
|
157
|
+
const innerWrapper = this.$refs.innerWrapper
|
|
158
|
+
let width = wrapper.clientWidth - parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight)
|
|
159
|
+
let height = wrapper.clientHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom)
|
|
160
|
+
if (!this.vertical) {
|
|
161
|
+
if (this._previousMargin || this._nextMargin) {
|
|
162
|
+
if (this._previousMargin) {
|
|
163
|
+
innerWrapper.style.marginLeft = `${this._previousMargin}px`
|
|
164
|
+
width = width - this._previousMargin
|
|
165
|
+
}
|
|
166
|
+
if (this._nextMargin) {
|
|
167
|
+
width = width - this._nextMargin
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
} else {
|
|
171
|
+
if (this._previousMargin || this._nextMargin) {
|
|
172
|
+
if (this._previousMargin) {
|
|
173
|
+
innerWrapper.style.marginTop = `${this._previousMargin}px`
|
|
174
|
+
height = height - this._previousMargin
|
|
175
|
+
}
|
|
176
|
+
if (this._nextMargin) {
|
|
177
|
+
height = height - this._nextMargin
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
innerWrapper.style.height = `${height}px`
|
|
182
|
+
innerWrapper.style.width = `${width}px`
|
|
183
|
+
},
|
|
184
|
+
initBs () {
|
|
185
|
+
this.destroyBs()
|
|
186
|
+
this.initLayerComputed()
|
|
187
|
+
const originBsOptions = {
|
|
188
|
+
scrollX: !this.vertical,
|
|
189
|
+
scrollY: this.vertical,
|
|
190
|
+
slide: {
|
|
191
|
+
loop: this.circular,
|
|
192
|
+
threshold: 0.5,
|
|
193
|
+
speed: this.duration,
|
|
194
|
+
easing: this.easing,
|
|
195
|
+
interval: this.interval,
|
|
196
|
+
autoplay: this.autoplay,
|
|
197
|
+
startPageXIndex: this.vertical ? 0 : this.currentIndex,
|
|
198
|
+
startPageYIndex: this.vertical ? this.currentIndex : 0
|
|
199
|
+
},
|
|
200
|
+
momentum: false,
|
|
201
|
+
bounce: false,
|
|
202
|
+
probeType: 3,
|
|
203
|
+
stopPropagation: true
|
|
204
|
+
}
|
|
205
|
+
const bsOptions = Object.assign({}, originBsOptions, this.scrollOptions)
|
|
206
|
+
this.bs = new BScroll(this.$refs.innerWrapper, bsOptions)
|
|
207
|
+
this.bs.scroller.hooks.on('beforeRefresh', () => {
|
|
208
|
+
this.initLayerComputed()
|
|
209
|
+
})
|
|
210
|
+
this.bs.on('slideWillChange', (page) => {
|
|
211
|
+
this.currentIndex = this.vertical ? page.pageY : page.pageX
|
|
212
|
+
this.$emit('change', getCustomEvent('change', {
|
|
213
|
+
current: this.currentIndex,
|
|
214
|
+
currentItemId: this.itemIds[this.currentIndex] || '',
|
|
215
|
+
source: this.changeSource
|
|
216
|
+
}, this))
|
|
217
|
+
})
|
|
218
|
+
|
|
219
|
+
this.bs.on('scrollEnd', () => {
|
|
220
|
+
this.$emit('animationfinish', getCustomEvent('animationfinish', {
|
|
221
|
+
current: this.currentIndex,
|
|
222
|
+
currentItemId: this.itemIds[this.currentIndex] || '',
|
|
223
|
+
source: this.changeSource
|
|
224
|
+
}, this))
|
|
225
|
+
})
|
|
226
|
+
this.bs.on('scroll', throttle(({ x, y }) => {
|
|
227
|
+
this.$emit('transition', getCustomEvent('transition', {
|
|
228
|
+
dx: this.lastX - x,
|
|
229
|
+
dy: this.lastY - y
|
|
230
|
+
}, this))
|
|
231
|
+
}, 30, {
|
|
232
|
+
leading: true,
|
|
233
|
+
trailing: false
|
|
234
|
+
}))
|
|
235
|
+
|
|
236
|
+
this.bs.on('beforeScrollStart', () => {
|
|
237
|
+
if (this.bs) {
|
|
238
|
+
this.lastX = this.bs.x
|
|
239
|
+
this.lastY = this.bs.y
|
|
240
|
+
}
|
|
241
|
+
this.changeSource = 'touch'
|
|
242
|
+
})
|
|
243
|
+
},
|
|
244
|
+
createResizeObserver () {
|
|
245
|
+
if (typeof ResizeObserver !== 'undefined'){
|
|
246
|
+
this.resizeObserver = new ResizeObserver(entries => {
|
|
247
|
+
if (!this.init) {
|
|
248
|
+
this.init = true
|
|
249
|
+
return
|
|
250
|
+
}
|
|
251
|
+
this.initBs()
|
|
252
|
+
})
|
|
253
|
+
const elementToObserve = document.querySelector('.mpx-swiper');
|
|
254
|
+
this.resizeObserver.observe(elementToObserve);
|
|
255
|
+
}
|
|
256
|
+
},
|
|
181
257
|
refresh () {
|
|
182
258
|
this.bs && this.bs.refresh()
|
|
183
259
|
},
|
|
@@ -186,6 +262,9 @@
|
|
|
186
262
|
const y = this.vertical ? index : 0
|
|
187
263
|
const speed = time === 0 ? 0 : this.duration
|
|
188
264
|
this.bs && this.bs.goToPage(x, y, speed)
|
|
265
|
+
},
|
|
266
|
+
setCurrentChildLength () {
|
|
267
|
+
this.currentChildLength = this.$children && this.$children.length
|
|
189
268
|
}
|
|
190
269
|
},
|
|
191
270
|
render (createElement) {
|
|
@@ -194,13 +273,13 @@
|
|
|
194
273
|
on: getInnerListeners(this, { ignoredListeners: ['change', 'animationfinish', 'transition'] }),
|
|
195
274
|
ref: 'wrapper'
|
|
196
275
|
}
|
|
276
|
+
|
|
197
277
|
const content = createElement('div', {
|
|
198
278
|
class: {
|
|
199
279
|
'mpx-swiper-content': true,
|
|
200
280
|
vertical: this.vertical
|
|
201
281
|
}
|
|
202
282
|
}, this.$slots.default)
|
|
203
|
-
|
|
204
283
|
const children = [content]
|
|
205
284
|
if (this.indicatorDots) {
|
|
206
285
|
const items = this.$slots.default.filter((VNode) => VNode.tag && VNode.tag.endsWith('mpx-swiper-item'))
|
|
@@ -227,7 +306,14 @@
|
|
|
227
306
|
}, dotsItems)
|
|
228
307
|
children.push(dots)
|
|
229
308
|
}
|
|
230
|
-
|
|
309
|
+
|
|
310
|
+
const innerWrapper = createElement('div', {
|
|
311
|
+
ref: 'innerWrapper',
|
|
312
|
+
class: {
|
|
313
|
+
'mpx-swiper-wrapper': true
|
|
314
|
+
}
|
|
315
|
+
}, children)
|
|
316
|
+
return createElement('div', data, [innerWrapper])
|
|
231
317
|
}
|
|
232
318
|
}
|
|
233
319
|
</script>
|
|
@@ -237,7 +323,6 @@
|
|
|
237
323
|
overflow hidden
|
|
238
324
|
position relative
|
|
239
325
|
|
|
240
|
-
|
|
241
326
|
.mpx-swiper-content
|
|
242
327
|
width 100%
|
|
243
328
|
height 100%
|
|
@@ -85,7 +85,7 @@ function checkDelAndGetPath (path) {
|
|
|
85
85
|
if (args.length === 1) {
|
|
86
86
|
delPath = current.parentPath
|
|
87
87
|
} else {
|
|
88
|
-
// case:
|
|
88
|
+
// case: _i(a, function() {})
|
|
89
89
|
canDel = false
|
|
90
90
|
break
|
|
91
91
|
}
|
|
@@ -169,7 +169,10 @@ function dealRemove (path, replace) {
|
|
|
169
169
|
t.validate(path, path.key, null)
|
|
170
170
|
path.remove()
|
|
171
171
|
}
|
|
172
|
-
|
|
172
|
+
delete path.needBind
|
|
173
|
+
delete path.collectInfo
|
|
174
|
+
} catch (e) {
|
|
175
|
+
}
|
|
173
176
|
}
|
|
174
177
|
|
|
175
178
|
module.exports = {
|
|
@@ -226,7 +229,10 @@ module.exports = {
|
|
|
226
229
|
const { last, keyPath } = calPropName(path)
|
|
227
230
|
path.needBind = true
|
|
228
231
|
if (needCollect) {
|
|
229
|
-
last.
|
|
232
|
+
last.collectInfo = {
|
|
233
|
+
key: t.stringLiteral(keyPath),
|
|
234
|
+
isSimple: !/[[.]/.test(keyPath)
|
|
235
|
+
}
|
|
230
236
|
}
|
|
231
237
|
|
|
232
238
|
if (!renderReduce) return
|
|
@@ -305,14 +311,12 @@ module.exports = {
|
|
|
305
311
|
// 优先判断前缀,再判断全等
|
|
306
312
|
if (checkPrefix(Object.keys(allBindings), keyPath) || pBindings[keyPath]) {
|
|
307
313
|
dealRemove(path, replace)
|
|
308
|
-
return
|
|
309
314
|
} else {
|
|
310
315
|
const currentBlockVars = bindings[keyPath]
|
|
311
316
|
if (currentBlockVars.length > 1) {
|
|
312
317
|
const index = currentBlockVars.findIndex(item => !item.canDel)
|
|
313
318
|
if (index !== -1 || currentBlockVars[0].path !== path) { // 当前block中存在不可删除的变量 || 不是第一个可删除变量,即可删除该变量
|
|
314
319
|
dealRemove(path, replace)
|
|
315
|
-
return
|
|
316
320
|
}
|
|
317
321
|
}
|
|
318
322
|
}
|
|
@@ -333,9 +337,14 @@ module.exports = {
|
|
|
333
337
|
},
|
|
334
338
|
MemberExpression: {
|
|
335
339
|
exit (path) {
|
|
336
|
-
if (path.
|
|
337
|
-
|
|
338
|
-
|
|
340
|
+
if (path.collectInfo) {
|
|
341
|
+
const { isSimple, key } = path.collectInfo
|
|
342
|
+
const callee = isSimple ? t.identifier('_sc') : t.identifier('_c')
|
|
343
|
+
const replaceNode = renderReduce
|
|
344
|
+
? t.callExpression(callee, [key])
|
|
345
|
+
: t.callExpression(callee, [key, path.node])
|
|
346
|
+
path.node && path.replaceWith(replaceNode)
|
|
347
|
+
delete path.collectInfo
|
|
339
348
|
}
|
|
340
349
|
}
|
|
341
350
|
}
|
|
@@ -1091,6 +1091,7 @@ function processBindEvent (el, options) {
|
|
|
1091
1091
|
for (const type in eventConfigMap) {
|
|
1092
1092
|
let needBind = false
|
|
1093
1093
|
let { configs, rawName, proxy } = eventConfigMap[type]
|
|
1094
|
+
delete eventConfigMap[type]
|
|
1094
1095
|
if (proxy) {
|
|
1095
1096
|
needBind = true
|
|
1096
1097
|
} else if (configs.length > 1) {
|
|
@@ -1098,11 +1099,14 @@ function processBindEvent (el, options) {
|
|
|
1098
1099
|
} else if (configs.length === 1) {
|
|
1099
1100
|
needBind = !!configs[0].hasArgs
|
|
1100
1101
|
}
|
|
1102
|
+
|
|
1103
|
+
const escapedType = dash2hump(type)
|
|
1101
1104
|
// 排除特殊情况
|
|
1102
|
-
if (
|
|
1105
|
+
if (!isValidIdentifierStr(escapedType)) {
|
|
1103
1106
|
warn$1(`EventName ${type} which need be framework proxy processed must be a valid identifier!`)
|
|
1104
1107
|
needBind = false
|
|
1105
1108
|
}
|
|
1109
|
+
|
|
1106
1110
|
if (needBind) {
|
|
1107
1111
|
if (rawName) {
|
|
1108
1112
|
// 清空原始事件绑定
|
|
@@ -1120,11 +1124,9 @@ function processBindEvent (el, options) {
|
|
|
1120
1124
|
value: '__invoke'
|
|
1121
1125
|
}
|
|
1122
1126
|
])
|
|
1123
|
-
eventConfigMap[
|
|
1127
|
+
eventConfigMap[escapedType] = configs.map((item) => {
|
|
1124
1128
|
return item.expStr
|
|
1125
1129
|
})
|
|
1126
|
-
} else {
|
|
1127
|
-
delete eventConfigMap[type]
|
|
1128
1130
|
}
|
|
1129
1131
|
}
|
|
1130
1132
|
|
|
@@ -2321,7 +2323,7 @@ function genFor (node) {
|
|
|
2321
2323
|
node.forProcessed = true
|
|
2322
2324
|
const index = node.for.index || 'index'
|
|
2323
2325
|
const item = node.for.item || 'item'
|
|
2324
|
-
return `
|
|
2326
|
+
return `_i(${node.for.exp}, function(${item},${index}){\n${genNode(node)}});\n`
|
|
2325
2327
|
}
|
|
2326
2328
|
|
|
2327
2329
|
function genNode (node) {
|
|
@@ -21,7 +21,7 @@ module.exports = function (raw) {
|
|
|
21
21
|
const componentsMap = mpx.componentsMap[packageName]
|
|
22
22
|
const pagesMap = mpx.pagesMap
|
|
23
23
|
const wxsContentMap = mpx.wxsContentMap
|
|
24
|
-
const
|
|
24
|
+
const optimizeRenderRules = mpx.optimizeRenderRules
|
|
25
25
|
const usingComponents = queryObj.usingComponents || []
|
|
26
26
|
const componentPlaceholder = queryObj.componentPlaceholder || []
|
|
27
27
|
const hasComment = queryObj.hasComment
|
|
@@ -86,39 +86,43 @@ module.exports = function (raw) {
|
|
|
86
86
|
return result
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
|
|
89
|
+
resultSource += `
|
|
90
90
|
global.currentInject = {
|
|
91
|
-
moduleId: ${JSON.stringify(moduleId)}
|
|
92
|
-
render: function () {
|
|
93
|
-
${compiler.genNode(ast)}
|
|
94
|
-
this._r();
|
|
95
|
-
}
|
|
91
|
+
moduleId: ${JSON.stringify(moduleId)}
|
|
96
92
|
};\n`
|
|
97
93
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
94
|
+
const rawCode = compiler.genNode(ast)
|
|
95
|
+
if (rawCode) {
|
|
96
|
+
const renderCode = `
|
|
97
|
+
global.currentInject.render = function (_i, _c, _r, _sc) {
|
|
98
|
+
${rawCode}
|
|
99
|
+
_r();
|
|
100
|
+
};\n`
|
|
101
|
+
try {
|
|
102
|
+
const bindResult = bindThis(renderCode, {
|
|
103
|
+
needCollect: true,
|
|
104
|
+
renderReduce: matchCondition(resourcePath, optimizeRenderRules),
|
|
105
|
+
ignoreMap: Object.assign({
|
|
106
|
+
_i: true,
|
|
107
|
+
_c: true,
|
|
108
|
+
_r: true
|
|
109
|
+
}, meta.wxsModuleMap)
|
|
110
|
+
})
|
|
111
|
+
resultSource += bindResult.code
|
|
112
|
+
if ((mode === 'tt' || mode === 'swan') && bindResult.propKeys) {
|
|
113
|
+
resultSource += `global.currentInject.propKeys = ${JSON.stringify(bindResult.propKeys)};\n`
|
|
114
|
+
}
|
|
115
|
+
} catch (e) {
|
|
116
|
+
error(`
|
|
108
117
|
Invalid render function generated by the template, please check!\n
|
|
109
118
|
Template result:
|
|
110
119
|
${result}\n
|
|
111
120
|
Error code:
|
|
112
|
-
${
|
|
121
|
+
${renderCode}
|
|
113
122
|
Error Detail:
|
|
114
123
|
${e.stack}`)
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
resultSource += bindResult.code + '\n'
|
|
119
|
-
|
|
120
|
-
if ((mode === 'tt' || mode === 'swan') && bindResult.propKeys) {
|
|
121
|
-
resultSource += `global.currentInject.propKeys = ${JSON.stringify(bindResult.propKeys)};\n`
|
|
124
|
+
return result
|
|
125
|
+
}
|
|
122
126
|
}
|
|
123
127
|
|
|
124
128
|
if (meta.computed) {
|
package/lib/web/processScript.js
CHANGED
|
@@ -111,9 +111,10 @@ module.exports = function (script, {
|
|
|
111
111
|
Vue.use(VueRouter)
|
|
112
112
|
global.getApp = function(){}
|
|
113
113
|
global.getCurrentPages = function(){
|
|
114
|
-
|
|
114
|
+
const router = global.__mpxRouter
|
|
115
|
+
if(!router) return []
|
|
115
116
|
// @ts-ignore
|
|
116
|
-
return
|
|
117
|
+
return (router.lastStack || router.stack).map(item => {
|
|
117
118
|
let page
|
|
118
119
|
const vnode = item.vnode
|
|
119
120
|
if(vnode && vnode.componentInstance) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mpxjs/webpack-plugin",
|
|
3
|
-
"version": "2.8.
|
|
3
|
+
"version": "2.8.61",
|
|
4
4
|
"description": "mpx compile core",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"mpx"
|
|
@@ -82,5 +82,5 @@
|
|
|
82
82
|
"engines": {
|
|
83
83
|
"node": ">=14.14.0"
|
|
84
84
|
},
|
|
85
|
-
"gitHead": "
|
|
85
|
+
"gitHead": "f393ffc439f21b24f5f09a65ef99db20b145e19a"
|
|
86
86
|
}
|