Skip to content

Instantly share code, notes, and snippets.

@uangsl
Created January 17, 2018 02:10
Show Gist options
  • Select an option

  • Save uangsl/970f8f60080b6b9896c5068fe5bee041 to your computer and use it in GitHub Desktop.

Select an option

Save uangsl/970f8f60080b6b9896c5068fe5bee041 to your computer and use it in GitHub Desktop.
<template>
<div style='position: relative;'>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'resize-observer-div',
methods: {
notify (event) {
this.$emit('notify', event)
},
addResizeHandlers () {
this._resizeObject.contentDocument.defaultView.addEventListener('resize', this.notify)
},
removeResizeHandlers () {
if (this._resizeObject && this._resizeObject.onload) {
if (!isIE && this._resizeObject.contentDocument) {
this._resizeObject.contentDocument.defaultView.removeEventListener('resize', this.notify)
}
delete this._resizeObject.onload
}
}
},
mounted () {
const object = document.createElement('object')
this._resizeObject = object
object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;')
object.onload = this.addResizeHandlers
object.type = 'text/html'
this.$el.appendChild(object)
object.data = 'about:blank'
},
beforeDestroy () {
this.removeResizeHandlers()
}
}
</script>
<style scoped>
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment