使用vue组件创建leaflet中的popup弹窗

最新推荐文章于 2024-09-20 09:58:05 发布

依托偶尔宁

最新推荐文章于 2024-09-20 09:58:05 发布

阅读量915

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xy1580/article/details/134508988

版权

leaflet中创建popup弹窗，如何使用vue组件

创建vue组件TestModal.vue,接收testData参数，发出close事件


// TestModal.vue

<template>
  <div></div>
</template>

<script>
export default {
  props: {
    testData: {
      type: Obj,
      default: () => {
        return {};
      },
    },
  },
  emits: ["close"],
  setup(props, { emit }) {
    const onClickHandle = () => {
      emit("close", {});
    };
  },
};
</script>

<style>
</style>

创建popup


import TestModal from './TestModal.vue'

const TestModalVue = Vue.extend(TestModal);

const createPopUp = info => {
  // 在 propsData 中传参，组件props接收
  let vm = new TestModalVue({
    propsData: {
      // 参数1
      testData: {},
      // 参数1
      testData2: {},
      ...
    }, //传参
  });
  // 监听 TestModal.vue 组件的事件
  vm.$on('close', obj => {
    // 这里就可以监听子组件的事件
  });
  vm.$mount(); //挂载

  // vm.$el 中就是 dom
  let htmlDom = vm.$el; 

  // 使用dom 创建弹窗
  L.popup({
      // closeButton: false,
      // autoClose: false,
      // closeOnEscapeKey: false,
      // closeOnClick: false,
      // offset: [-135, 0],
    })
      .setLatLng([lat,lon])
      .setContent(htmlDom as HTMLElement)
      .openOn(map);
  };