如何将Vue组件集成到传单弹出窗口中? [英] How can I integrate a Vue component in a leaflet popup?

问题描述

我的项目使用Vue.js和传单以标记的形式在地图上显示一些数据.

My project uses Vue.js and leaflet to display some data on a map, in the shape of markers.

地图上的标记是绑定的弹出窗口，就像相关的任何Vue组件一样，当相关数据发生更改时，我希望对这些内容进行反应式更新.

The markers on the map are bound popups, which content I would like to be reactively updated when the associated data change, just like any Vue component does.

我检查了 vueleaflet 的选项，该选项为传单提供了弹出式组件.但是此脚本通过组件的属性<l-popup content="a popup"></l-popup>定义了弹出窗口的内容.在我的情况下，这种方式不太相关，因为我在弹出窗口中插入了一些复杂的模板(包括条件语句和子组件).

I checked the option of vueleaflet, which provides a popup component for leaflet. But this script defines the content of the popup though an attribute of the component: <l-popup content="a popup"></l-popup>. This way isn't so relevant in my case, as I have some complex templating to insert in the popup (including conditional statements and subcomponents).

我宁愿需要类似的东西:

I would rather need something like:

<l-popup>
  My elaborate content here.
</l-popup>

推荐答案

我建议您使用 vue2 -leaflet .

I advice you to use vue2-leaflet instead.

它具有一个弹出窗口组件，其行为与您描述的方式相同.请参见此处.

It has a popup component that behaves the way you describe. See here.

如果您不想使用程序包在vue和Leaflet之间建立链接，则还有另一种解决方案.这几乎是一个把戏.

There is also another solution, if you don't want to use a package to do the link between vue and leaflet. It's almost a trick.

您在组件中创建了精美的内容，但是将其隐藏了:

You create your elaborate content in a component, but you hide it :

<my-elaborate-popup-content v-show=False ref='foo'><my-elaborate-popup-content>

然后，您可以像这样在代码中访问该组件的生成的html:

Then you can access the generated html of that component in your code like this :

const template = this.$refs.foo.$el.innerHTML

并使用它填充您的弹出窗口！

and use it to fill you popup !

这篇关于如何将Vue组件集成到传单弹出窗口中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！