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>
|