提交 2c123ed4 编写于 作者: H hdx

feat(x:web-view): 支持用户调整大小,默认充满当前页面不包含标题栏,不追加到body

上级 d2fbfd2f
import Video from './video/index'
//#if _X_
// @ts-ignore
import WebView from './web-view/index-x'
//#else
// @ts-ignore
import WebView from './web-view/index'
//#endif
import Map from './map/index'
import CoverView from './cover-view'
import CoverImage from './cover-image'
......
import { ref, onMounted, Ref, watchEffect } from 'vue'
import { hasOwn } from '@vue/shared'
import {
defineBuiltInComponent,
useAttrs,
UniElement,
} from '@dcloudio/uni-components'
import { getRealPath } from '@dcloudio/uni-platform'
import { once, ON_WEB_INVOKE_APP_SERVICE } from '@dcloudio/uni-shared'
import { onWebInvokeAppService } from '../../../service/onWebInvokeAppService'
const Invoke = /*#__PURE__*/ once(() =>
UniServiceJSBridge.on(ON_WEB_INVOKE_APP_SERVICE, onWebInvokeAppService)
)
const props = {
src: {
type: String,
default: '',
},
}
type RootRef = Ref<HTMLElement | null>
class UniWebViewElement extends UniElement {}
export default /*#__PURE__*/ defineBuiltInComponent({
inheritAttrs: false,
name: 'WebView',
props,
//#if _X_ && !_NODE_JS_
rootElement: {
name: 'uni-web-view',
class: UniWebViewElement,
},
//#endif
setup(props) {
Invoke()
const rootRef: RootRef = ref(null)
const iframeRef: RootRef = ref(null)
const { $attrs, $excludeAttrs, $listeners } = useAttrs({
excludeListeners: true,
})
const renderIframe = () => {
const iframe = document.createElement('iframe')
watchEffect(() => {
for (const key in $attrs.value) {
if (hasOwn($attrs.value, key)) {
const attr = ($attrs.value as any)[key]
;(iframe as any)[key] = attr
}
}
})
watchEffect(() => {
iframe.src = getRealPath(props.src)
})
iframeRef.value = iframe
}
__NODE_JS__ ? onMounted(renderIframe) : renderIframe()
onMounted(() => {
rootRef.value?.appendChild(iframeRef.value!)
})
//#if _X_ && !_NODE_JS_
onMounted(() => {
const rootElement = rootRef.value as UniWebViewElement
rootElement.attachVmProps(props)
})
//#endif
return () => {
return (
<uni-web-view
class="uni-webview"
{...$listeners.value}
{...$excludeAttrs.value}
ref={rootRef}
/>
)
}
},
})
uni-web-view {
display: flex;
}
/* #ifndef UNI-APP-X */
uni-web-view.uni-webview--fullscreen {
position: absolute;
left: 0;
......@@ -8,3 +10,15 @@ uni-web-view.uni-webview--fullscreen {
top: 0;
bottom: 0;
}
/* #endif */
/* #ifdef UNI-APP-X */
uni-web-view.uni-webview {
flex: 1;
}
uni-web-view.uni-webview > iframe {
width: 100%;
height: 100%;
border: none;
}
/* #endif */
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册