参考传单弹出窗口以放在前面或后面答案

【问题标题】：Referring leaflet popup for bring to front or back参考传单弹出窗口以放在前面或后面
【发布时间】：2019-08-21 15:06:15
【问题描述】：

我正在构建应用程序，使用 vue.js 将传单地图上的数据显示为弹出窗口。我想在传单弹出窗口中使用作为传单对象一部分的“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)
                })
            }
```

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

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

【问题讨论】：

标签： vue.js leaflet

【解决方案1】：

好吧，当使用所有组件继承传单的“层”时 - 使用“@add”内部将渲染的引用映射到地图/标记/层作为“传单对象”，这意味着只需添加“@add”：

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

和内部函数：

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

【讨论】：

【解决方案2】：

@bring-to-front 不是添加到地图传单对象的事件，而@add - 是事件，因此@add($event) 将引用传单对象。因为您只需使用“@add”作为弹出组件。

【讨论】：