fix(BLabel): 修复组件动态参数监听错误

必传参数不全初始化无法完成, 必传参数再次改变导致的错误
yue1123 · Dec 2, 2023 · e87cbd2 · e87cbd2
1 parent 4dbcd9c
commit e87cbd2
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 32 deletions.
diff --git a/packages/components/overlay/label/index.vue b/packages/components/overlay/label/index.vue
@@ -5,7 +5,15 @@
 <script setup lang="ts">
   import { provide, watch } from 'vue'
   import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
-  import { bindEvents, Callback, isDef, callWhenDifferentValue, type Point, warn } from '../../../utils/index'
+  import {
+    bindEvents,
+    Callback,
+    isDef,
+    callWhenDifferentValue,
+    type Point,
+    warn,
+    conditionalCall
+  } from '../../../utils'
   export type LabelStyle = {
     [k in keyof CSSStyleDeclaration]?: any
   }
@@ -75,6 +83,7 @@
     'rightclick'
   ])
   let label: BMapGL.Label
+  const hasLabel = () => !!label
   const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
     const cal = () => {
       label && map.removeOverlay(label)
@@ -96,28 +105,30 @@
       visible && map.addOverlay(label)
       isDef(zIndex) && setZIndex(zIndex)
       bindEvents(props, vueEmits, label)
+      watch(() => props.offset, callWhenDifferentValue(setOffset), { deep: true })
+      watch(() => props.style, callWhenDifferentValue(setStyle), { deep: true })
+      watch(() => props.enableMassClear, setMassClear)
+      watch(() => props.zIndex, setZIndex)
+      watch(
+        () => props.visible,
+        (n) => {
+          map[n ? 'addOverlay' : 'removeOverlay'](label)
+        }
+      )
     }
 
     init()
     ready(map, label)
     // 监听值变化
-    watch(() => props.position, callWhenDifferentValue(setPosition), { deep: true })
-    watch(() => props.offset, callWhenDifferentValue(setOffset), { deep: true })
-    watch(() => props.style, callWhenDifferentValue(setStyle), { deep: true })
-    watch(() => props.content, setContent)
-    watch(() => props.zIndex, setZIndex)
-    watch(() => props.enableMassClear, setMassClear)
-    watch(
-      () => props.visible,
-      (n) => {
-        map[n ? 'addOverlay' : 'removeOverlay'](label)
-      }
-    )
+    watch(() => props.position, callWhenDifferentValue(conditionalCall(hasLabel, setPosition, init)), { deep: true })
+    watch(() => props.content, conditionalCall(hasLabel, setContent, init))
     return cal
   })
 
   provide('getOverlayInstance', () => label)
-
+  defineOptions({
+    name: 'BLabel'
+  })
   function setZIndex(zIndex?: number) {
     isDef(zIndex) && label.setZIndex(zIndex)
   }
@@ -136,7 +147,4 @@
   function setMassClear(enableMassClear: boolean): void {
     enableMassClear ? label!.enableMassClear() : label!.disableMassClear()
   }
-  defineOptions({
-    name: 'BLabel'
-  })
 </script>
diff --git a/packages/components/overlay/marker/index.vue b/packages/components/overlay/marker/index.vue
@@ -92,7 +92,6 @@
     onDragend?: Callback
     onRightClick?: Callback
   }
-
   const props = withDefaults(defineProps<MarkerProps>(), {
     offset: () => ({
       x: 0,
@@ -194,6 +193,7 @@
   })
 
   provide('getOverlayInstance', () => marker)
+  defineOptions({ name: 'BMarker' })
 
   // 获取图标配置
   function getIconConfig(): BMapGL.Icon {
@@ -240,5 +240,4 @@
   function setRotation(rotation: number) {
     rotation !== undefined && marker.setRotation(rotation)
   }
-  defineOptions({ name: 'BMarker' })
 </script>
diff --git a/packages/env.d.ts b/packages/env.d.ts
@@ -17,6 +17,7 @@ interface ImportMeta {
   readonly env: ImportMetaEnv
 }
 declare global {
+  /** 是否是开发环境 */
   const __DEV__: boolean
 }
 

diff --git a/packages/utils/conditionalCall.ts b/packages/utils/conditionalCall.ts
@@ -0,0 +1,7 @@
+export function conditionalCall<T>(
+  conditionalFlagGetter: () => boolean,
+  trulyCall: (arg: T) => void,
+  falselyCall: (arg: T) => void
+) {
+  return (arg: T) => (conditionalFlagGetter() ? trulyCall(arg) : falselyCall(arg))
+}
diff --git a/packages/utils/helper.ts b/packages/utils/helper.ts
@@ -1,14 +1,3 @@
-/**
- * watch 回调辅助前置判断
- * @param cal watch 处理函数
- * @returns (nv: T, ov: T) => void
- */
-export function callWhenDifferentValue<T>(cal: (v: T) => void): (nv: T, ov: T) => void {
-  return (nv: T, ov: T) => {
-    if (nv === ov || (nv !== ov && JSON.stringify(nv) !== JSON.stringify(ov))) cal(nv)
-  }
-}
-
 export const notNullish = <T = any>(val?: T | null | undefined): val is T => val != null
 export const assert = (condition: boolean, ...infos: any[]) => {
   if (!condition) console.warn(...infos)
@@ -27,5 +16,3 @@ export const rand = (min: number, max: number) => {
 }
 export const hasOwn = <T extends object, K extends keyof T>(val: T, key: K): key is K =>
   Object.prototype.hasOwnProperty.call(val, key)
-
-export const getInitEventKey = (id: string) => `__initd__${id}`