fix: uid 在 getCurrentInstance 返回 null 时无法获取

使用 nanoid 替换, 简化组件发布订阅以及生命周期调用 Fixes #44
yue1123 · Sep 11, 2023 · 2c4fc95 · 2c4fc95
1 parent ca83181
commit 2c4fc95
Show file tree

Hide file tree

Showing 35 changed files with 365 additions and 361 deletions.
diff --git a/packages/components/autoComplete/index.vue b/packages/components/autoComplete/index.vue
@@ -3,9 +3,8 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, watch } from 'vue'
-  import useLifeCycle from '../../hooks/useLifeCycle'
-  import useBaseMapEffect from '../../hooks/useBaseMapEffect'
+  import { ref, watch } from 'vue'
+  import useParentComponentEffect from '../../hooks/useParentComponentEffect'
   import { Callback, Point, bindEvents, getPoint, warn } from '../../utils'
   export interface AutocompleteProps {
     /**
@@ -23,44 +22,41 @@
     onConfirm?: Callback
   }
   const autoCompleteInput = ref<HTMLInputElement>()
-  const { ready } = useLifeCycle()
   const props = withDefaults(defineProps<AutocompleteProps>(), {})
   const vueEmits = defineEmits(['initd', 'unload', 'searchComplete', 'highlight', 'confirm'])
   let autoComplete: BMapGL.Autocomplete
-  onMounted(() =>
-    useBaseMapEffect((map: BMapGL.Map) => {
-      if (!autoCompleteInput.value) warn('BAutoComplete', 'render error')
-      const { location, types } = props
-      let _location: string | BMapGL.Point | BMapGL.Map = map
-      if (typeof location === 'object' && (location as Point).lat && (location as Point).lng) {
-        _location = getPoint(location as Point)
-      }
-      autoComplete = new BMapGL.Autocomplete({
-        location: _location,
-        onSearchComplete: (e) => vueEmits('searchComplete', e),
-        input: autoCompleteInput.value,
-        types
-      })
-      bindEvents(props, vueEmits, autoComplete)
-      ready(map, autoComplete)
-      watch(
-        () => props.location,
-        (n) => {
-          let _location: string | BMapGL.Point | BMapGL.Map = map
-          if (typeof n === 'object' && (n as Point).lat && (n as Point).lng) {
-            _location = getPoint(n as Point)
-          }
-          autoComplete.setLocation(_location)
-        }
-      )
-      watch(
-        () => props.types,
-        (n) => {
-          n && autoComplete.setTypes(n)
-        }
-      )
+  const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
+    if (!autoCompleteInput.value) warn('BAutoComplete', 'render error')
+    const { location, types } = props
+    let _location: string | BMapGL.Point | BMapGL.Map = map
+    if (typeof location === 'object' && (location as Point).lat && (location as Point).lng) {
+      _location = getPoint(location as Point)
+    }
+    autoComplete = new BMapGL.Autocomplete({
+      location: _location,
+      onSearchComplete: (e) => vueEmits('searchComplete', e),
+      input: autoCompleteInput.value,
+      types
     })
-  )
+    bindEvents(props, vueEmits, autoComplete)
+    ready(map, autoComplete)
+    watch(
+      () => props.location,
+      (n) => {
+        let _location: string | BMapGL.Point | BMapGL.Map = map
+        if (typeof n === 'object' && (n as Point).lat && (n as Point).lng) {
+          _location = getPoint(n as Point)
+        }
+        autoComplete.setLocation(_location)
+      }
+    )
+    watch(
+      () => props.types,
+      (n) => {
+        n && autoComplete.setTypes(n)
+      }
+    )
+  })
   defineOptions({
     name: 'BAutoComplete'
   })

diff --git a/packages/components/contextMenu/index.vue b/packages/components/contextMenu/index.vue
@@ -2,8 +2,7 @@
 
 <script setup lang="ts">
   import { inject, watch } from 'vue'
-  import useBaseMapEffect from '../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../hooks/useParentComponentEffect'
   import { bindEvents, Callback, isString, callWhenDifferentValue } from '../../utils'
   export interface ContextMenuItem {
     text: string
@@ -28,9 +27,8 @@
   })
   const getParentInstance = inject('getOverlayInstance', () => null)
   const vueEmits = defineEmits(['initd', 'unload', 'open', 'close'])
-  const { ready } = useLifeCycle()
   let contextMenu: BMapGL.ContextMenu
-  useBaseMapEffect((map: BMapGL.Map) => {
+  const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
     const target = getParentInstance() || map
     const cal = () => {
       contextMenu && target.removeContextMenu(contextMenu)
@@ -90,10 +88,9 @@
     // 在地图上添加点标记
     return cal
   })
-</script>
 
-<script lang="ts">
-  export default {
-    name: 'BContextMenu'
-  }
+  defineOptions({
+    name: 'BContextMenu',
+    inheritAttrs: false
+  })
 </script>
diff --git a/packages/components/control/city-list/index.vue b/packages/components/control/city-list/index.vue
@@ -2,8 +2,7 @@
 
 <script setup lang="ts">
   import { watch } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { ControlAnchor } from '../../../utils'
   export interface CityListProps {
     /**
@@ -27,7 +26,6 @@
     visible?: boolean
   }
 
-  const { ready } = useLifeCycle()
   const props = withDefaults(defineProps<CityListProps>(), {
     anchor: 'BMAP_ANCHOR_TOP_LEFT',
     offset: () => ({ x: 18, y: 18 }),
@@ -36,7 +34,7 @@
   })
   let cityListControl: BMapGL.CityListControl
   defineEmits(['initd', 'unload'])
-  useBaseMapEffect((map) => {
+  const { ready } = useParentComponentEffect((map) => {
     const { visible, expand, offset, anchor } = props
     cityListControl = new BMapGL.CityListControl({
       expand: expand,

diff --git a/packages/components/control/control/index.vue b/packages/components/control/control/index.vue
@@ -7,9 +7,8 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, watch } from 'vue'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
+  import { ref, watch } from 'vue'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { ControlAnchor, warn } from '../../../utils'
   export interface ControlOptions {
     /**
@@ -29,39 +28,36 @@
     visible?: boolean
   }
   const controlContainer = ref<HTMLDivElement>()
-  const { ready } = useLifeCycle()
   const props = withDefaults(defineProps<ControlOptions>(), {
     anchor: 'BMAP_ANCHOR_TOP_LEFT',
     offset: () => ({ x: 83, y: 18 }),
     visible: true
   })
-  defineEmits(['initd', 'unload'])
-  onMounted(() => {
-    useBaseMapEffect((map: BMapGL.Map) => {
-      if (!controlContainer.value) {
-        if (__DEV__) {
-          warn('BControl', 'container el render error')
-        }
-        return
+  const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
+    if (!controlContainer.value) {
+      if (__DEV__) {
+        warn('BControl', 'container el render error')
       }
-      const { offset, anchor, visible } = props
-      const customControl = new BMapGL.Control()
-      customControl.defaultAnchor = window[anchor]
-      customControl.defaultOffset = new BMapGL.Size(offset.x, offset.y)
-      customControl.initialize = (_map: BMapGL.Map) => {
-        return _map.getContainer().appendChild(controlContainer.value as Node) as HTMLElement
+      return
+    }
+    const { offset, anchor, visible } = props
+    const customControl = new BMapGL.Control()
+    customControl.defaultAnchor = window[anchor]
+    customControl.defaultOffset = new BMapGL.Size(offset.x, offset.y)
+    customControl.initialize = (_map: BMapGL.Map) => {
+      return _map.getContainer().appendChild(controlContainer.value as Node) as HTMLElement
+    }
+    visible && map.addControl(customControl)
+    ready(map, customControl)
+    watch(
+      () => props.visible,
+      (n) => {
+        map[n ? 'addControl' : 'removeControl'](customControl)
       }
-      visible && map.addControl(customControl)
-      ready(map, customControl)
-      watch(
-        () => props.visible,
-        (n) => {
-          map[n ? 'addControl' : 'removeControl'](customControl)
-        }
-      )
-      return () => map.removeControl(customControl)
-    })
+    )
+    return () => map.removeControl(customControl)
   })
+  defineEmits(['initd', 'unload'])
   defineOptions({
     name: 'BControl',
     inheritAttrs: false

diff --git a/packages/components/control/copyright/index.vue b/packages/components/control/copyright/index.vue
@@ -7,9 +7,8 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref, getCurrentInstance, onUpdated, warn, watch } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import { ref, getCurrentInstance, onUpdated, warn, watch } from 'vue'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import copyrightControlPosCacheMap from './copyrightControlPosCacheMap'
   import { ControlAnchor } from '../../../utils'
   export interface CopyrightProps {
@@ -34,65 +33,62 @@
     offset: () => ({ x: 83, y: 18 }),
     visible: true
   })
-  const { ready } = useLifeCycle()
   const copyrightContainer = ref<HTMLDivElement>()
   let copyrightControl: BMapGL.CopyrightControl
   const uid = getCurrentInstance()?.uid
   defineEmits(['initd', 'unload'])
-  onMounted(() => {
-    useBaseMapEffect((map: BMapGL.Map) => {
-      const { anchor, offset, visible } = props
-      if (!copyrightContainer.value) {
-        if (__DEV__) {
-          warn('BCopyright', 'container el render error')
-        }
-        return
-      }
-      let mapBounds = map.getBounds()
-      // 同一位置的 copyright 应该调用 addCopyright, 防止多个 copyright 重叠
-      if (!(copyrightControl = copyrightControlPosCacheMap[anchor])) {
-        copyrightControl = new BMapGL.CopyrightControl({
-          offset: new BMapGL.Size(offset.x, offset.y),
-          anchor: window[anchor]
-        })
-        copyrightControlPosCacheMap[anchor] = copyrightControl
-        map.addControl(copyrightControl)
+  const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
+    const { anchor, offset, visible } = props
+    if (!copyrightContainer.value) {
+      if (__DEV__) {
+        warn('BCopyright', 'container el render error')
       }
-      if (visible) {
-        copyrightControl.addCopyright({
-          id: uid,
-          content: copyrightContainer.value.innerHTML,
-          bounds: mapBounds
-        })
-      }
-      ready(map, copyrightControl)
-      watch(
-        () => props.visible,
-        (n) => {
-          if (n) {
-            copyrightContainer.value &&
-              copyrightControl.addCopyright({
-                id: uid,
-                content: copyrightContainer.value.innerHTML,
-                bounds: mapBounds
-              })
-          } else {
-            uid && copyrightControl.removeCopyright(uid)
-          }
-        }
-      )
-      return () => {
-        const cacheCopyright = copyrightControlPosCacheMap[anchor]
-        const getCopyrightCollection = cacheCopyright?.getCopyrightCollection?.bind(cacheCopyright)
-
-        if (getCopyrightCollection && getCopyrightCollection()?.length > 1) {
-          cacheCopyright.removeCopyright(uid!)
+      return
+    }
+    let mapBounds = map.getBounds()
+    // 同一位置的 copyright 应该调用 addCopyright, 防止多个 copyright 重叠
+    if (!(copyrightControl = copyrightControlPosCacheMap[anchor])) {
+      copyrightControl = new BMapGL.CopyrightControl({
+        offset: new BMapGL.Size(offset.x, offset.y),
+        anchor: window[anchor]
+      })
+      copyrightControlPosCacheMap[anchor] = copyrightControl
+      map.addControl(copyrightControl)
+    }
+    if (visible) {
+      copyrightControl.addCopyright({
+        id: uid,
+        content: copyrightContainer.value.innerHTML,
+        bounds: mapBounds
+      })
+    }
+    ready(map, copyrightControl)
+    watch(
+      () => props.visible,
+      (n) => {
+        if (n) {
+          copyrightContainer.value &&
+            copyrightControl.addCopyright({
+              id: uid,
+              content: copyrightContainer.value.innerHTML,
+              bounds: mapBounds
+            })
         } else {
-          map.removeControl(cacheCopyright)
-          Reflect.deleteProperty(copyrightControlPosCacheMap, anchor)
+          uid && copyrightControl.removeCopyright(uid)
         }
       }
-    })
+    )
+    return () => {
+      const cacheCopyright = copyrightControlPosCacheMap[anchor]
+      const getCopyrightCollection = cacheCopyright?.getCopyrightCollection?.bind(cacheCopyright)
+
+      if (getCopyrightCollection && getCopyrightCollection()?.length > 1) {
+        cacheCopyright.removeCopyright(uid!)
+      } else {
+        map.removeControl(cacheCopyright)
+        Reflect.deleteProperty(copyrightControlPosCacheMap, anchor)
+      }
+    }
   })
   onUpdated(() => {
     if (!copyrightControl) return

diff --git a/packages/components/control/location/index.vue b/packages/components/control/location/index.vue
@@ -2,8 +2,7 @@
 
 <script setup lang="ts">
   import { watch } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { bindEvents, Callback, ControlAnchor } from '../../../utils'
   export interface LocationProps {
     /**
@@ -24,15 +23,14 @@
     onLocationError?: Callback
     onLocationSuccess?: Callback
   }
-  const { ready } = useLifeCycle()
   const props = withDefaults(defineProps<LocationProps>(), {
     anchor: 'BMAP_ANCHOR_BOTTOM_RIGHT',
     offset: () => ({ x: 18, y: 18 }),
     visible: true
   })
   let locationControl: BMapGL.LocationControl
   const vueEmits = defineEmits(['initd', 'unload', 'locationSuccess', 'locationError'])
-  useBaseMapEffect((map) => {
+  const { ready } = useParentComponentEffect((map) => {
     const { visible, offset, anchor } = props
     locationControl = new BMapGL.LocationControl({
       offset: new BMapGL.Size(offset.x, offset.y),

diff --git a/packages/components/control/navigation3d/index.vue b/packages/components/control/navigation3d/index.vue
@@ -2,8 +2,7 @@
 
 <script setup lang="ts">
   import { watch } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { type ControlAnchor } from '../../../utils'
   export interface Navigation3dProps {
     /**
@@ -27,10 +26,9 @@
     offset: () => ({ x: 83, y: 18 }),
     visible: true
   })
-  const { ready } = useLifeCycle()
   let navigation3dControl: BMapGL.NavigationControl3D
   defineEmits(['initd', 'unload'])
-  useBaseMapEffect((map) => {
+  const { ready } = useParentComponentEffect((map) => {
     const { visible, offset, anchor } = props
     navigation3dControl = new BMapGL.NavigationControl3D({
       offset: new BMapGL.Size(offset.x, offset.y),