指向正面或背面的传单弹出窗口

Question

我正在建设的应用程序显示在一个传单地图上的数据弹出使用vue.js。我想在leaflet弹出窗口中使用"bringToFront“函数，它是leaflet对象的一部分。我如何调用函数-无论是作为L对象，还是l-popup组件？

Vue- leaflet库允许将leaflet元素呈现为像"l-marker“或"l-popup”这样的组件。例如，像"l-add“这样的标记函数可以通过添加"@”符号(作为vue组件)来使用。

不幸的是，我还没有找到任何有条件地使用bringToFront()或bringToBack函数来弹出层的方法。

我尝试过将@bring to-front=“condition”传递到组件中，就像使用标记的@add一样；

在弹出窗口中使用":ref“可以带出不带leaflet方法的"vue”组件。

Component:
``` <l-layer-group ref="layerGroup">

        <l-marker v-for="items"

                  :ref="`someRef`"

                  :lat-lng="item"

               //succeed:

                  @add="($event)=>open($event, item)">

            <l-popup :lat-lng="item"

                     //not succeed`enter code here`

                      @bring-to-front => someFunc()

                     :ref="`popup${someDiffId}`">

                <popup-content :key=item.key" :item="item"/>

            </l-popup>

        </l-marker>

    </l-layer-group>```

在@open中，我使用：

                const marker = event.target;
                this.$nextTick(() => {
                    marker.openPopup()
                    condition? marker._popup.bringToFront():marker._popup.bringToBack()
                    setTimeout(() => {
                        marker.remove()
                    }, 30000)
                })
            }

通过引用"marker._popup“在标记上使用"@add”，我成功了，但不是来自$this.refs，也不是来自观察者。

引用来自":ref“的对象就是引用一个没有@bringToFront方法的vue组件，所以我使用了来自标记的引用。

Answer 1

好吧，当使用所有组件继承leaflet的“层”时-在内部使用"@ add“将渲染到map/marker/layer的引用作为"leaflet对象”，这意味着只需添加"@add"：

<l-popup  @add="($event)=>func($event, leafletItem)">

和内部的func：

  methods: {
         func(event, leafletItem){
          const popup = event.target;
          condition ? popup.bringToFront() : popup.bringToBack()
        }
    }

Answer 2

@bring to -front不是添加到地图leaflet对象的事件，而@add -是事件，所以@add($event)会引用leaflet对象。因为你只使用了"@add“作为弹出组件。