feat: 新增 Popup 支持更新 className 和 style (#2457)

.changeset/curly-ligers-tap.md

@@ -0,0 +1,5 @@
+---
+'@antv/l7-component': patch
+---
+
+popup 更新支持 className 和 style

examples/demos/components/index.ts

@@ -1,4 +1,5 @@
 export { MapRender as control } from './control';
 export { MapRender as layerPopup } from './layerPopup';
 export { MapRender as marker } from './marker';
+export { MapRender as popup } from './popup';
 export { MapRender as swipe } from './swipe';

examples/demos/components/popup.ts

@@ -0,0 +1,36 @@
+import { Popup, Scene } from '@antv/l7';
+import * as allMap from '@antv/l7-maps';
+import type { RenderDemoOptions } from '../../types';
+
+export function MapRender(options: RenderDemoOptions) {
+  const scene = new Scene({
+    id: 'map',
+    renderer: options.renderer,
+    map: new allMap.GaodeMap({
+      style: 'light',
+      center: [121.435159, 31.256971],
+      zoom: 14.89,
+      minZoom: 10,
+    }),
+  });
+  scene.on('loaded', () => {
+    const popup = new Popup({
+      lngLat: {
+        lng: 121.435159,
+        lat: 31.256971,
+      },
+      html: '<div>123456</div>',
+      className: String(Math.random()),
+      style: `z-index: ${String(Math.random())}`,
+    });
+
+    setInterval(() => {
+      popup.setOptions({
+        className: String(Math.random()),
+        style: `z-index: ${String(Math.floor(Math.random() * 100))}`,
+      });
+    }, 2000);
+
+    scene.addPopup(popup);
+  });
+}

packages/component/src/popup/popup.ts

@@ -168,6 +168,7 @@ export default class Popup<O extends IPopupOption = IPopupOption>
 
   public setOptions(option: Partial<O>) {
     this.show();
+    const { className: oldClassName } = this.popupOption;
     this.popupOption = {
       ...this.popupOption,
       ...option,
@@ -182,8 +183,6 @@ export default class Popup<O extends IPopupOption = IPopupOption>
         'maxWidth',
         'anchor',
         'stopPropagation',
-        'className',
-        'style',
         'lngLat',
         'offsets',
       ])
@@ -216,6 +215,15 @@ export default class Popup<O extends IPopupOption = IPopupOption>
     } else if (this.checkUpdateOption(option, ['text']) && option.text) {
       this.setText(option.text);
     }
+    if (this.checkUpdateOption(option, ['className'])) {
+      if (oldClassName) {
+        this.container.classList.remove(oldClassName ?? '');
+      }
+      this.container.classList.add(option.className ?? '');
+    }
+    if (this.checkUpdateOption(option, ['style'])) {
+      DOM.addStyle(this.container, option.style ?? '');
+    }
     if (this.checkUpdateOption(option, ['lngLat']) && option.lngLat) {
       this.setLnglat(option.lngLat);
     }