From 82d07179e178edd7d5b655719b4385de08d02440 Mon Sep 17 00:00:00 2001 From: DCloud_LXH <283700113@qq.com> Date: Tue, 27 Apr 2021 18:12:29 +0800 Subject: [PATCH] feat: separateAttrs --- packages/uni-h5/dist/uni-h5.esm.js | 110 +++++++++--------- packages/uni-h5/src/helpers/dom.ts | 20 ++++ .../src/view/components/video/index.tsx | 17 +-- .../src/view/components/web-view/index.tsx | 104 +++++++---------- 4 files changed, 125 insertions(+), 126 deletions(-) diff --git a/packages/uni-h5/dist/uni-h5.esm.js b/packages/uni-h5/dist/uni-h5.esm.js index b5b6530e72..d4aede06b4 100644 --- a/packages/uni-h5/dist/uni-h5.esm.js +++ b/packages/uni-h5/dist/uni-h5.esm.js @@ -1,5 +1,5 @@ import {isFunction, extend, hyphenate, isPlainObject, isString, isArray, hasOwn as hasOwn$1, isObject as isObject$1, capitalize, toRawType, makeMap as makeMap$1, isPromise, invokeArrayFns as invokeArrayFns$1} from "@vue/shared"; -import {injectHook, withModifiers, createVNode, getCurrentInstance, inject, provide, reactive, computed, nextTick, onBeforeMount, onMounted, onBeforeActivate, onBeforeDeactivate, openBlock, createBlock, mergeProps, toDisplayString, ref, defineComponent, resolveComponent, toHandlers, renderSlot, watch, onUnmounted, onBeforeUnmount, onActivated, withDirectives, vShow, createTextVNode, createCommentVNode, renderList, onDeactivated, createApp, watchEffect, Transition, withCtx, KeepAlive, resolveDynamicComponent, Fragment} from "vue"; +import {injectHook, withModifiers, createVNode, getCurrentInstance, inject, provide, reactive, computed, nextTick, onBeforeMount, onMounted, onBeforeActivate, onBeforeDeactivate, openBlock, createBlock, mergeProps, toDisplayString, ref, defineComponent, resolveComponent, toHandlers, renderSlot, watch, onUnmounted, onBeforeUnmount, onActivated, withDirectives, vShow, createTextVNode, createCommentVNode, renderList, onDeactivated, Fragment, Teleport, createApp, watchEffect, Transition, withCtx, KeepAlive, resolveDynamicComponent} from "vue"; import {once, passive, normalizeTarget, isBuiltInComponent, invokeArrayFns, NAVBAR_HEIGHT, parseQuery, PRIMARY_COLOR, removeLeadingSlash, getLen, ON_REACH_BOTTOM_DISTANCE, decodedQuery, debounce, updateElementStyle, addFont, scrollTo} from "@dcloudio/uni-shared"; import {useRoute, createRouter, createWebHistory, createWebHashHistory, useRouter, isNavigationFailure, RouterView} from "vue-router"; function applyOptions(options, instance2, publicThis) { @@ -1369,6 +1369,25 @@ function normalizePageMeta(pageMeta) { } return pageMeta; } +function separateAttrs(attrs2) { + const ignore = ["style", "class"]; + let $listeners = {}; + let $ignoreAttrs = {}; + let $otherAttrs = {}; + let $attrs = {}; + for (const key in attrs2) { + if (/^on[A-Z]+/.test(key)) { + $listeners[key] = attrs2[key]; + $otherAttrs[key] = attrs2[key]; + } else if (ignore.includes(key)) { + $ignoreAttrs[key] = attrs2[key]; + $otherAttrs[key] = attrs2[key]; + } else { + $attrs[key] = attrs2[key]; + } + } + return {$attrs, $otherAttrs, $listeners, $ignoreAttrs}; +} PolySymbol(process.env.NODE_ENV !== "production" ? "layout" : "l"); let tabBar; function useTabBar() { @@ -10574,16 +10593,6 @@ function useVideo(props2, attrs2, trigger) { buffered }); }); - const videoAttrs = computed(() => { - const ignore = ["style", "class"]; - const obj = {}; - for (const key in attrs2) { - if (!(ignore.includes(key) || /^on[A-Z]+/.test(key))) { - obj[key] = attrs2[key]; - } - } - return obj; - }); function onDurationChange({ target }) { @@ -10667,7 +10676,6 @@ function useVideo(props2, attrs2, trigger) { } return { videoRef, - videoAttrs, state, play, pause, @@ -11022,7 +11030,6 @@ var index$2 = /* @__PURE__ */ defineComponent({ initI18nVideoMsgsOnce(); const { videoRef, - videoAttrs, state: videoState, play, pause, @@ -11069,6 +11076,7 @@ var index$2 = /* @__PURE__ */ defineComponent({ } = useControls(props2, videoState, seek); useContext(play, pause, seek, sendDanmu, playbackRate, requestFullScreen, exitFullScreen); return () => { + const videoAttrs = separateAttrs(attrs2).$attrs; return createVNode("uni-video", { ref: rootRef, id: props2.id @@ -11090,7 +11098,7 @@ var index$2 = /* @__PURE__ */ defineComponent({ src: videoState.src, poster: props2.poster, autoplay: !!props2.autoplay - }, videoAttrs.value, { + }, videoAttrs, { class: "uni-video-video", "webkit-playsinline": true, playsinline: true, @@ -11216,49 +11224,45 @@ const props$2 = { src: { type: String, default: "" - }, - allow: String, - sandbox: String + } }; var index$1 = /* @__PURE__ */ defineComponent({ + inheritAttrs: false, name: "WebView", props: props$2, - setup(props2) { + setup(props2, { + attrs: attrs2 + }) { const rootRef = ref(null); - const iframe = document.createElement("iframe"); - const { - _resize - } = useWebViewSize(rootRef, iframe); - useWebViewLoader(iframe, props2, _resize); - return () => createVNode("uni-web-view", { - ref: rootRef - }, [createVNode(ResizeSensor, { - onResize: _resize - }, null, 8, ["onResize"])], 512); + const iframeRef = ref(null); + const _resize = useWebViewSize(rootRef, iframeRef); + onMounted(() => { + _resize(); + }); + onActivated(() => { + iframeRef.value && (iframeRef.value.style.display = "block"); + }); + onDeactivated(() => { + iframeRef.value && (iframeRef.value.style.display = "none"); + }); + return () => { + const webViewAttrs = separateAttrs(attrs2); + return createVNode(Fragment, null, [createVNode("uni-web-view", mergeProps(webViewAttrs.$otherAttrs, { + ref: rootRef + }), [createVNode(ResizeSensor, { + onResize: _resize + }, null, 8, ["onResize"])], 16), createVNode(Teleport, { + to: "body" + }, { + default: () => [createVNode("iframe", mergeProps({ + ref: iframeRef, + src: getRealPath(props2.src) + }, webViewAttrs.$attrs), null, 16, ["src"])] + })]); + }; } }); -function useWebViewLoader(iframe, props2, _resize) { - props2.allow && iframe.setAttribute("allow", props2.allow); - props2.sandbox && iframe.setAttribute("sandbox", props2.sandbox); - iframe.src = getRealPath(props2.src); - document.body.appendChild(iframe); - onMounted(() => { - _resize(); - }); - onActivated(() => { - iframe.style.display = "block"; - }); - onDeactivated(() => { - iframe.style.display = "none"; - }); - onUnmounted(() => { - document.body.removeChild(iframe); - }); - watch(() => props2.src, (val) => { - iframe.src = getRealPath(val); - }); -} -function useWebViewSize(rootRef, iframe) { +function useWebViewSize(rootRef, iframeRef) { const _resize = () => { const { top, @@ -11266,7 +11270,7 @@ function useWebViewSize(rootRef, iframe) { width, height } = rootRef.value.getBoundingClientRect(); - updateElementStyle(iframe, { + iframeRef.value && updateElementStyle(iframeRef.value, { position: "absolute", display: "block", border: "0", @@ -11276,9 +11280,7 @@ function useWebViewSize(rootRef, iframe) { height: height + "px" }); }; - return { - _resize - }; + return _resize; } const UniViewJSBridge$1 = /* @__PURE__ */ extend(ViewJSBridge, { publishHandler(event2, args, pageId) { diff --git a/packages/uni-h5/src/helpers/dom.ts b/packages/uni-h5/src/helpers/dom.ts index fa3797cda8..74004a7d5a 100644 --- a/packages/uni-h5/src/helpers/dom.ts +++ b/packages/uni-h5/src/helpers/dom.ts @@ -12,3 +12,23 @@ export function checkMinWidth(minWidth: number) { ] return Math.max.apply(null, sizes) > minWidth } + +export function separateAttrs(attrs: Data) { + const ignore = ['style', 'class'] + let $listeners: Data = {} // 事件 + let $ignoreAttrs: Data = {} // ignore + let $otherAttrs: Data = {} // 事件 和 ignore + let $attrs: Data = {} // 除去 ignore 和 事件 + for (const key in attrs) { + if (/^on[A-Z]+/.test(key)) { + $listeners[key] = attrs[key] + $otherAttrs[key] = attrs[key] + } else if (ignore.includes(key)) { + $ignoreAttrs[key] = attrs[key] + $otherAttrs[key] = attrs[key] + } else { + $attrs[key] = attrs[key] + } + } + return { $attrs, $otherAttrs, $listeners, $ignoreAttrs } +} diff --git a/packages/uni-h5/src/view/components/video/index.tsx b/packages/uni-h5/src/view/components/video/index.tsx index ea4865dd56..dfc3553aa2 100644 --- a/packages/uni-h5/src/view/components/video/index.tsx +++ b/packages/uni-h5/src/view/components/video/index.tsx @@ -17,6 +17,7 @@ import { getRealPath } from '@dcloudio/uni-platform' import { useSubscribe } from '@dcloudio/uni-components' import { useCustomEvent } from '@dcloudio/uni-components' import { useUserAction } from '@dcloudio/uni-components' +import { separateAttrs } from '../../../helpers/dom' type CustomEventTrigger = ReturnType type UserActionState = ReturnType['state'] @@ -312,16 +313,6 @@ function useVideo( }) } ) - const videoAttrs = computed(() => { - const ignore = ['style', 'class'] - const obj: Data = {} - for (const key in attrs) { - if (!(ignore.includes(key) || /^on[A-Z]+/.test(key))) { - obj[key] = attrs[key] - } - } - return obj - }) function onDurationChange({ target }: Event) { state.duration = (target as HTMLVideoElement).duration } @@ -404,7 +395,6 @@ function useVideo( } return { videoRef, - videoAttrs, state, play, pause, @@ -817,7 +807,6 @@ export default /*#__PURE__*/ defineComponent({ initI18nVideoMsgsOnce() const { videoRef, - videoAttrs, state: videoState, play, pause, @@ -873,6 +862,8 @@ export default /*#__PURE__*/ defineComponent({ ) return () => { + const videoAttrs = separateAttrs(attrs).$attrs + return (
type RootRef = Ref -type ReSize = ReturnType['_resize'] export default /*#__PURE__*/ defineComponent({ + inheritAttrs: false, name: 'WebView', props, - setup(props) { + setup(props, { attrs }) { const rootRef: RootRef = ref(null) - const iframe = document.createElement('iframe') - const { _resize } = useWebViewSize(rootRef, iframe) - useWebViewLoader(iframe, props, _resize) + const iframeRef: RootRef = ref(null) + const _resize = useWebViewSize(rootRef, iframeRef) - return () => ( - - - - ) - }, -}) - -function useWebViewLoader( - iframe: HTMLIFrameElement, - props: WebViewProps, - _resize: ReSize -) { - props.allow && iframe.setAttribute('allow', props.allow) - props.sandbox && iframe.setAttribute('sandbox', props.sandbox) - iframe.src = getRealPath(props.src) - document.body.appendChild(iframe) + onMounted(() => { + _resize() + }) - onMounted(() => { - _resize() - }) + onActivated(() => { + iframeRef.value && (iframeRef.value.style.display = 'block') + }) - onActivated(() => { - iframe.style.display = 'block' - }) + onDeactivated(() => { + iframeRef.value && (iframeRef.value.style.display = 'none') + }) - onDeactivated(() => { - iframe.style.display = 'none' - }) + return () => { + const webViewAttrs = separateAttrs(attrs) - onUnmounted(() => { - document.body.removeChild(iframe) - }) + return ( + <> + + + - watch( - () => props.src, - (val) => { - iframe.src = getRealPath(val) + + + + + ) } - ) -} + }, +}) -function useWebViewSize(rootRef: RootRef, iframe: HTMLIFrameElement) { +function useWebViewSize(rootRef: RootRef, iframeRef: RootRef) { const _resize = () => { const { top, left, width, height } = rootRef.value!.getBoundingClientRect() - updateElementStyle(iframe, { - position: 'absolute', - display: 'block', - border: '0', - top: top + 'px', - left: left + 'px', - width: width + 'px', - height: height + 'px', - }) + iframeRef.value && + updateElementStyle(iframeRef.value, { + position: 'absolute', + display: 'block', + border: '0', + top: top + 'px', + left: left + 'px', + width: width + 'px', + height: height + 'px', + }) } - return { - _resize, - } + return _resize } -- GitLab