提交 8c1896b3 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

feat(h5 webview): add prop fullscreen

上级 05af3fae
<template> <template>
<uni-web-view v-on="$listeners"> <uni-web-view
ref="webviewContainer"
:class="{'uni-webview--fullscreen':fullscreen}"
v-on="$listeners"
>
<v-uni-resize-sensor <v-uni-resize-sensor
ref="sensor" ref="sensor"
@resize="_resize" @resize="_resize"
/> />
</uni-web-view> </uni-web-view>
</template> </template>
<script> <script>
export default { export default {
name: 'WebView', name: 'WebView',
...@@ -13,6 +18,10 @@ export default { ...@@ -13,6 +18,10 @@ export default {
src: { src: {
type: String, type: String,
default: '' default: ''
},
fullscreen: {
type: Boolean,
default: true
} }
}, },
watch: { watch: {
...@@ -26,44 +35,56 @@ export default { ...@@ -26,44 +35,56 @@ export default {
this.iframe[key] = this.$attrs[key] this.iframe[key] = this.$attrs[key]
}) })
this.iframe.src = this.$getRealPath(this.src) this.iframe.src = this.$getRealPath(this.src)
document.body.appendChild(this.iframe) if (this.fullscreen) {
document.body.appendChild(this.iframe)
} else {
this.$refs.webviewContainer.appendChild(this.iframe)
}
this._resize() this._resize()
}, },
activated () { activated () {
this.iframe.style.display = 'block' this.fullscreen && (this.iframe.style.display = 'block')
}, },
deactivated () { deactivated () {
this.iframe.style.display = 'none' this.fullscreen && (this.iframe.style.display = 'none')
}, },
beforeDestroy () { beforeDestroy () {
document.body.removeChild(this.iframe) this.fullscreen && document.body.removeChild(this.iframe)
}, },
methods: { methods: {
_resize () { _resize () {
const { if (this.fullscreen) {
top, const {
left, top,
width, left,
height width,
} = this.$el.getBoundingClientRect() height
} = this.$el.getBoundingClientRect()
this.iframe.style.position = 'absolute' this.iframe.style.position = 'absolute'
this.iframe.style.display = 'block' this.iframe.style.display = 'block'
this.iframe.style.border = 0 this.iframe.style.border = 0
this.iframe.style.top = top + 'px' this.iframe.style.top = top + 'px'
this.iframe.style.left = left + 'px' this.iframe.style.left = left + 'px'
this.iframe.style.width = width + 'px' this.iframe.style.width = width + 'px'
this.iframe.style.height = height + 'px' this.iframe.style.height = height + 'px'
} else {
this.iframe.style.width = this.$refs.webviewContainer.style.width || '300px'
this.iframe.style.height = this.$refs.webviewContainer.style.height || '150px'
}
} }
} }
} }
</script> </script>
<style> <style>
uni-web-view { uni-web-view {
position: absolute; display: flex;
left: 0; }
right: 0; uni-web-view.uni-webview--fullscreen {
top: 0; position: absolute;
bottom: 0; left: 0;
} right: 0;
top: 0;
bottom: 0;
}
</style> </style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册