feat: separateAttrs

packages/uni-h5/dist/uni-h5.esm.js

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

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

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<typeof useCustomEvent>
 type UserActionState = ReturnType<typeof useUserAction>['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 (
         <uni-video ref={rootRef} id={props.id}>
           <div
@@ -895,7 +886,7 @@ export default /*#__PURE__*/ defineComponent({
               src={videoState.src}
               poster={props.poster}
               autoplay={!!props.autoplay}
-              {...videoAttrs.value}
+              {...videoAttrs}
               class="uni-video-video"
               webkit-playsinline
               playsinline

packages/uni-h5/src/view/components/web-view/index.tsx

 import {
   defineComponent,
-  watch,
   ref,
-  ExtractPropTypes,
   onMounted,
   Ref,
   onActivated,
   onDeactivated,
-  onUnmounted,
+  Teleport,
 } from 'vue'
 import { ResizeSensor } from '@dcloudio/uni-components'
 import { getRealPath } from '@dcloudio/uni-platform'
 import { updateElementStyle } from '@dcloudio/uni-shared'
+import { separateAttrs } from '../../../helpers/dom'
 
 const props = {
   src: {
     type: String,
     default: '',
   },
-  allow: String,
-  sandbox: String,
 }
 
-type WebViewProps = ExtractPropTypes<typeof props>
 type RootRef = Ref<HTMLElement | null>
-type ReSize = ReturnType<typeof useWebViewSize>['_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 () => (
-      <uni-web-view ref={rootRef}>
-        <ResizeSensor onResize={_resize} />
-      </uni-web-view>
-    )
-  },
-})
-
-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 (
+        <>
+          <uni-web-view {...webViewAttrs.$otherAttrs} ref={rootRef}>
+            <ResizeSensor onResize={_resize} />
+          </uni-web-view>
 
-  watch(
-    () => props.src,
-    (val) => {
-      iframe.src = getRealPath(val)
+          <Teleport to="body">
+            <iframe
+              ref={iframeRef}
+              src={getRealPath(props.src)}
+              {...webViewAttrs.$attrs}
+            ></iframe>
+          </Teleport>
+        </>
+      )
     }
-  )
-}
+  },
+})
 
-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
 }