feat: set contextInfo to element

packages/uni-components/src/components/canvas/index.vue

@@ -23,7 +23,7 @@
 </template>
 <script lang="ts">
 import { ref } from "vue";
-import { useAttrs, useSubscribe, withWebEvent } from "@dcloudio/uni-components";
+import { useAttrs, useContextInfo, useSubscribe, withWebEvent } from "@dcloudio/uni-components";
 import { getCurrentPageVm, getCurrentPageId, onEventPrevent } from "@dcloudio/uni-core";
 import { saveImage, getSameOriginUrl } from "@dcloudio/uni-platform";
 import ResizeSensor from "../resize-sensor";
@@ -144,7 +144,8 @@ export default {
   created() {
     this._actionsDefer = [];
     this._images = {};
-    useSubscribe(this._handleSubscribe);
+    const id = useContextInfo();
+    useSubscribe(this._handleSubscribe, id, true);
   },
   mounted() {
     this.$trigger = useNativeEvent(this.$emit);

packages/uni-components/src/components/editor/index.tsx

@@ -5,7 +5,7 @@ import QuillClass, {
   RangeStatic,
   StringMap,
 } from 'quill'
-import { useSubscribe } from '@dcloudio/uni-components'
+import { useContextInfo, useSubscribe } from '@dcloudio/uni-components'
 import { getRealPath } from '@dcloudio/uni-platform'
 import { defineBuiltInComponent } from '../../helpers/component'
 import { CustomEventTrigger, useCustomEvent } from '../../helpers/useEvent'
@@ -256,6 +256,7 @@ function useQuill(
       }
     })
   })
+  const id = useContextInfo()
   useSubscribe((type: string, data: any) => {
     const { options, callbackId } = data
     let res
@@ -412,7 +413,7 @@ function useQuill(
         }),
       })
     }
-  })
+  }, id, true)
 }
 
 const props = /*#__PURE__*/ Object.assign({}, keyboardProps, {

packages/uni-components/src/helpers/useContextInfo.ts

+import {
+  onMounted,
+  getCurrentInstance,
+} from 'vue'
+import { useCurrentPageId } from '@dcloudio/uni-core'
+
+type ContextType = 'canvas' | 'map' | 'video' | 'editor'
+
+export interface ContextInfo {
+  id: string,
+  type: ContextType
+  page: number
+}
+
+export interface HTMLElementWithContextInfo extends HTMLElement {
+  __uniContextInfo?: ContextInfo
+}
+let index = 0
+export function useContextInfo() {
+  const page = useCurrentPageId()
+  const instance = getCurrentInstance()!
+  const vm = instance.proxy!
+  const type = vm.$options.name!.toLowerCase() as ContextType
+  const id = (vm as any).id || `context${index++}`
+  onMounted(() => {
+    const el = vm.$el as HTMLElementWithContextInfo
+    el.__uniContextInfo = {
+      id,
+      type,
+      page
+    }
+  })
+  return `${page}.${type}.${id}`
+}
+export function getContextInfo(el: HTMLElement | HTMLElementWithContextInfo) {
+  return (el as HTMLElementWithContextInfo).__uniContextInfo
+}
\ No newline at end of file

packages/uni-components/src/helpers/useSubscribe.ts

@@ -42,14 +42,15 @@ function removeSubscribe(name: string) {
 
 export function useSubscribe(
   callback: (type: string, data: unknown) => void,
-  name?: string
+  name?: string,
+  multiple?: boolean
 ) {
   const instance = getCurrentInstance()!
   const vm = instance.proxy!
-  const pageId = name ? 0 : useCurrentPageId()
+  const pageId = multiple || !name ? useCurrentPageId() : 0
   onMounted(() => {
     addSubscribe(name || normalizeEvent(pageId, vm)!, callback)
-    if (!name) {
+    if (multiple || !name) {
       watch(
         () => (vm as any).id,
         (value, oldValue) => {

packages/uni-components/src/index.ts

 export * from './components'
 export { useOn, useSubscribe } from './helpers/useSubscribe'
+export { useContextInfo, getContextInfo } from './helpers/useContextInfo'
 export {
   withWebEvent,
   useCustomEvent,

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

@@ -10,6 +10,7 @@ import {
 } from 'vue'
 import {
   defineBuiltInComponent,
+  useContextInfo,
   useSubscribe,
   useCustomEvent,
 } from '@dcloudio/uni-components'
@@ -299,6 +300,7 @@ function useMap(
   }
   try {
     // TODO 支持在页面外使用
+    const id = useContextInfo()
     useSubscribe((type, data: any = {}) => {
       switch (type) {
         case 'getCenterLocation':
@@ -391,7 +393,7 @@ function useMap(
           })
           break
       }
-    })
+    }, id, true)
   } catch (error) {}
   onMounted(() => {
     loadMaps((result) => {

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

@@ -14,6 +14,7 @@ import { useI18n, initI18nVideoMsgsOnce } from '@dcloudio/uni-core'
 import { getRealPath } from '@dcloudio/uni-platform'
 import {
   defineBuiltInComponent,
+  useContextInfo,
   useSubscribe,
   useCustomEvent,
   EmitEvent,
@@ -683,6 +684,7 @@ function useContext(
     requestFullScreen,
     exitFullScreen,
   }
+  const id = useContextInfo()
   useSubscribe((type: string, data: any) => {
     let options
     switch (type) {
@@ -699,7 +701,7 @@ function useContext(
     if (type in methods) {
       methods[type as keyof typeof methods](options)
     }
-  })
+  }, id, true)
 }
 
 const props = {
@@ -875,6 +877,7 @@ export default /*#__PURE__*/ defineBuiltInComponent({
             onTouchstart={onTouchstart}
             onTouchend={onTouchend}
             onTouchmove={onTouchmove}
+            // @ts-ignore
             onFullscreenchange={withModifiers(onFullscreenChange, ['stop'])}
             onWebkitfullscreenchange={withModifiers(
               ($event: Event) => onFullscreenChange($event, true),
@@ -883,6 +886,7 @@ export default /*#__PURE__*/ defineBuiltInComponent({
           >
             <video
               ref={videoRef}
+              // @ts-ignore
               style={{ 'object-fit': props.objectFit }}
               muted={!!props.muted}
               loop={!!props.loop}