92 lines
2.0 KiB
Vue
92 lines
2.0 KiB
Vue
<template>
|
||
<view class="iframe" :style="{height: formProps.height + 'px', width: '100%'}">
|
||
<web-view v-if="show" :webview-styles="webviewStyles" :fullscreen="false" :src="formProps.url"
|
||
:style="{height: formProps.height + 'px', width: '100%'}" class="w-iframe" scrolling="auto"
|
||
frameborder="0"></web-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { onUnload } from "@dcloudio/uni-app";
|
||
|
||
const props = defineProps({
|
||
formProps: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
modelValue: String,
|
||
readonly: Boolean
|
||
})
|
||
|
||
const show = ref(true)
|
||
|
||
const webviewStyles = ref({
|
||
progress: {
|
||
color: '#FF3333'
|
||
},
|
||
width: '100%',
|
||
height: props.formProps.height + 'px',
|
||
position: 'absolute' //"static",
|
||
})
|
||
|
||
uni.$on('wv:scorll', () => {
|
||
reloadPos(pos => {
|
||
webviewStyles.value.top = pos.top;
|
||
})
|
||
})
|
||
|
||
uni.$on('hideFp', () => {
|
||
show.value = false
|
||
})
|
||
|
||
uni.$on('showFp', () => {
|
||
show.value = true
|
||
})
|
||
|
||
onUnload(() => {
|
||
uni.$off('wv:scorll')
|
||
uni.$off('showFp')
|
||
uni.$off('hideFp')
|
||
})
|
||
|
||
onMounted(() => {
|
||
reloadPos(pos => {
|
||
webviewStyles.value.top = pos.top;
|
||
})
|
||
})
|
||
|
||
|
||
function reloadPos(callback) {
|
||
// #ifdef APP-VUE
|
||
const view = uni.createSelectorQuery().in(this).select('.iframe')
|
||
view.fields({ size: true, rect: true }, ({ height, width, top, left, right, bottom }) => {
|
||
uni.createSelectorQuery().selectViewport().scrollOffset(({ scrollTop }) => {
|
||
return callback({
|
||
top: parseInt(top) + parseInt(scrollTop) + 40 + 'px',
|
||
left: parseInt(left) + 'px',
|
||
width: parseInt(width) + 'px',
|
||
height: parseInt(height) + 'px'
|
||
})
|
||
}).exec()
|
||
}).exec()
|
||
// #endif
|
||
}
|
||
|
||
|
||
// #ifdef H5
|
||
//在h5下使用js去除iframe边框，style设置居然不能生效
|
||
onMounted(() => {
|
||
const iframe = document.getElementsByTagName('iframe')
|
||
for (let im of iframe) {
|
||
im.setAttribute('frameborder', 0)
|
||
}
|
||
})
|
||
// #endif
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
|
||
</style> |