Vue 传单加载时打开弹出窗口

Question

如何使 Vue-leaflet 标记弹出窗口在加载时已打开。

<l-map style="height: 350px" :zoom="zoom" :center="center">
  <l-tile-layer :url="url"></l-tile-layer>
  <l-marker :lat-lng="markerLatLng">
    <l-popup>Hello!</l-popup>
  </l-marker>
</l-map>

我尝试过添加这样的选项

<l-popup :options="{closeOnClick: false,autoClose: false, openPopup:true}">Hello!</l-popup>

但它不起作用。

Answer 1

Vue Leaflet 中没有允许popup默认打开 a 的属性。要以编程方式打开一个，popup我们需要引用.markerpopup

假设下面是您的模板标记

<template>
  <l-map 
    style="height: 350px" 
    :zoom="zoom" 
    :center="center">
    <l-tile-layer :url="url"></l-tile-layer>
    <l-marker ref="marker" :lat-lng="markerLatLng">
      <l-popup ref="popup">
        This is a popup open by default
      </l-popup>
    </l-marker>
  </l-map>
</template>

然后，您可以编写此mounted生命周期方法，以便在加载弹出窗口时以编程方式打开弹出窗口。

mounted(){
   this.$nextTick(() => {
      this.$refs.marker.mapObject.openPopup()
   }) 
  }

App.vue这个问题的一个工作示例可以在我的沙箱文件中看到： https://codesandbox.io/s/vue-leaflet-popup-open-by-default-09fcr