function getMovableArea (weex) {
|
const dom = weex.requireModule('dom')
|
|
return {
|
name: 'MovableArea',
|
props: {
|
scaleArea: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data () {
|
return {
|
width: 0,
|
height: 0,
|
items: []
|
}
|
},
|
methods: {
|
_resize () {
|
this._getWH().then(() => {
|
this.items.forEach(function (item) {
|
item.componentInstance.setParent()
|
})
|
})
|
},
|
// _find (target, items = this.items) {
|
// var root = this.$el
|
// function get (node) {
|
// for (let i = 0; i < items.length; i++) {
|
// const item = items[i]
|
// if (node === item.componentInstance.$el) {
|
// return item
|
// }
|
// }
|
// if (node === root || node === document.body || node === document) {
|
// return null
|
// }
|
// return get(node.parentNode)
|
// }
|
// return get(target)
|
// },
|
_touchstart (t) {
|
// t.stopPropagation()
|
if (this.touchItem) {
|
this.touchItem.touchstart(t)
|
}
|
// var i = t.touches
|
// if (i) {
|
// if (i.length > 1) {
|
// var r = {
|
// x: i[1].pageX - i[0].pageX,
|
// y: i[1].pageY - i[0].pageY
|
// }
|
// this.pinchStartLen = calc(r)
|
// this.gapV = r
|
// if (!this.scaleArea) {
|
// var touch0 = this._find(i[0].target)
|
// var touch1 = this._find(i[1].target)
|
// this._scaleMovableView = touch0 && touch0 === touch1 ? touch0 : null
|
// }
|
// }
|
// }
|
},
|
_touchmove (t) {
|
t.stopPropagation()
|
if (this.touchItem) {
|
this.touchItem.touchmove(t)
|
}
|
// var n = t.touches
|
// if (n) {
|
// if (n.length > 1) {
|
// t.preventDefault()
|
// var i = {
|
// x: n[1].pageX - n[0].pageX,
|
// y: n[1].pageY - n[0].pageY
|
// }
|
// if (this.gapV.x !== null && this.pinchStartLen > 0) {
|
// var r = calc(i) / this.pinchStartLen
|
// this._updateScale(r)
|
// }
|
// this.gapV = i
|
// }
|
// }
|
},
|
_touchend (e) {
|
// e.stopPropagation()
|
if (this.touchItem) {
|
this.touchItem.touchend(e)
|
this.touchItem = null
|
}
|
// var t = e.touches
|
// if (!(t && t.length)) {
|
// if (e.changedTouches) {
|
// this.gapV.x = 0
|
// this.gapV.y = 0
|
// this.pinchStartLen = null
|
// if (this.scaleArea) {
|
// this.items.forEach(function (item) {
|
// item.componentInstance._endScale()
|
// })
|
// } else {
|
// if (this._scaleMovableView) {
|
// this._scaleMovableView.componentInstance._endScale()
|
// }
|
// }
|
// }
|
// }
|
},
|
// _updateScale (e) {
|
// if (e && e !== 1) {
|
// if (this.scaleArea) {
|
// this.items.forEach(function (item) {
|
// item.componentInstance._setScale(e)
|
// })
|
// } else {
|
// if (this._scaleMovableView) {
|
// this._scaleMovableView.componentInstance._setScale(e)
|
// }
|
// }
|
// }
|
// },
|
_getWH () {
|
return this._getComponentSize(this.$refs.el).then(({ width, height, top, left }) => {
|
this.width = width
|
this.height = height
|
this.top = top
|
this.left = left
|
})
|
},
|
_getComponentSize (el) {
|
return new Promise((resolve) => {
|
dom.getComponentRect(el, ({ size }) => {
|
resolve(size)
|
})
|
})
|
}
|
},
|
created () {
|
this.items = []
|
this.gapV = {
|
x: null,
|
y: null
|
}
|
this.pinchStartLen = null
|
},
|
mounted () {
|
// 由于weex在mounted后渲染是异步的不能确保元素渲染完成，需要延迟执行
|
setTimeout(() => {
|
this.__isMounted = true
|
this._resize()
|
}, 200)
|
},
|
render (createElement) {
|
const items = []
|
const slots = Array.isArray(this.$slots.default) ? this.$slots.default : []
|
|
slots.forEach(vnode => {
|
if (vnode.componentOptions && vnode.componentOptions.tag === 'movable-view') {
|
items.push(vnode)
|
}
|
})
|
|
this.items = items
|
const listeners = {}
|
const events = ['touchstart', 'touchmove', 'touchend']
|
events.forEach(event => {
|
listeners[event] = this[`_${event}`]
|
})
|
return createElement('div', this._g({
|
ref: 'el',
|
on: listeners,
|
staticClass: ['uni-movable-area']
|
}, this.$listeners), items, 2)
|
},
|
style: {
|
'uni-movable-area': {
|
width: '10px',
|
height: '10px'
|
}
|
}
|
}
|
}
|
|
export default function init (Vue, weex) {
|
Vue.component('movable-area', getMovableArea(weex))
|
}
|
