vue.js - 引用传单弹出窗口可置于前面或后面

Question

我正在构建应用程序，使用 vue.js 将传单 map 上的数据显示为弹出窗口。我想在传单弹出窗口中使用作为传单对象一部分的“bringToFront”函数。我如何调用该函数 - 无论是作为 L 对象还是 L-popup 组件？

Vue-leaf-let 库允许将传单元素渲染为“l-marker”或“l-popup”等组件。例如，诸如“l-add”之类的标记函数是通过添加“@”符号(作为 vue 组件)来使用的。

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

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

在弹出窗口中使用“:ref”带来没有传单方法的“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>```

from @open I use:
```            open(event, item) {
                const marker = event.target;
                this.$nextTick(() => {
                    marker.openPopup()
                    condition? marker._popup.bringToFront():marker._popup.bringToBack()
                    setTimeout(() => {
                        marker.remove()
                    }, 30000)
                })
            }
``` 

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

从“:ref”引用对象是指没有 @bringToFront 方法的 vue 组件，因此我使用来自标记的引用。

Answer 1

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

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

和内部函数:

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