LMarker在Vue2Leaflet中的扩展

Question

我试图扩展一个vue.js组件(LMarker从Vue2Leaflet)，让它做两件事：

1. 存储有关标记的额外标识信息
2. 发出自定义事件，父组件可用来显示与从服务器中提取的标记相关的信息。

下面的代码是我所拥有的：

<template>
  <div style="display: none;">
    <slot></slot>
  </div>
</template>
<script>
  import LMarker from 'vue2-leaflet'

  export default {
    name: 'LocalityMarker',
    extends: LMarker,
    props: {
      name: {
        type: String,
        required: true
      }

    },
    data: function () {
      return {
        number: 678
      }
    },
    methods: {
      updateLocality: function () {
        this.$emit('marker-clicked', this.number)
      }
    }
  }
</script>

然而，这是行不通的。当我使用Vue Devtools查看组件时，我看到的是在LocalityMarker中定义的属性，而不是在LMarker中定义的属性。

Vue.js文档并没有深入解释extends到底是如何工作的，所以我不知道我做错了什么。

非常感谢你的帮助。

Answer 1

我有一个关于你的定制标记的解决方案。我没有扩展它，但是我创建了一个由父级操作的其他组件。

我不知道你到底想要什么，但如果你想制作一个能接收额外信息并显示信息的标记，我希望我能写任何东西来帮助你。对不起我的写作(我知道，我太糟糕了)。

这个父组件

<template lang="pug">
  div
    l-map( :zoom="zoom" :center="center" style="height:500px")
      l-tile-layer( :url="url" , :attribution="attr" )
       div( v-for="marker in markers")
        custome(  ref="cada" ,  :coordinateLL="marker" , :information="'hola que tal;)'")
    button( @click="cambio" ) Se ve?
</template>

<script>
import { LMap, LTileLayer, LMarker, LIcon} from "vue2-leaflet"
import custome from "./protoV2.vue"

export default{
  name:"Proto",
  components:{
    LMap, LTileLayer, LMarker, LIcon, custome
  },
  data (){
    return {
        visible: true,
        url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
        attr: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        zoom : 2,
        center: [0,0],
        markers: [ [ 46.1222, -12.222 ], [ 46.1222, 12.222 ]  ],
    }
  },
  methods : {
      cambio: function(){
        for( let idx = 0; idx < this.$refs["cada"].length; idx++ ){
            this.$refs["cada"][idx].IsVisible( "gg" );
        }
      }
    }
 };
 </script>

子组件

<template >
  <div >
    <l-marker :lat-lng="coordinate"  >
      <slot v-if="visible">
        <l-tooltip :content="message" :options= "{ permanent: true}"  />
      </slot>
    </l-marker>
  </div>
</template>

<script>
  import { LMarker, LPopup, LTooltip } from "vue2-leaflet";

  export default{
  name: "custome",
  components:{
     LMarker, LPopup, LTooltip
  },
  props: {
     coordinateLL : {
         type : Array,
         require : true
     },
     information : {
         type : String,
         require: true
     }
  },
  beforeMount: function(){
        this.coordinate = L.latLng( this.coordinateLL );
  },
  methods: {
      IsVisible: function( msg ){
          this.visible = !this.visible;
      }
  },
  data () {
      return {
         visible: true,
         coordinate: null,
         message: this.information,
         activa: false
      }
  }
};

​

Answer 2

我认为问题是，您正在导入整个Vue2-传单包，而不仅仅是LMarker。如果您在导入并检查LMarker对象之后抛出一个调试器，您将看到以下内容

{L: {…}, findRealParent: ƒ, propsBinder: ƒ, LCircle: {…}, LCircleMarker: {…}, …}

您可以通过将导入行更改为LMarker来导入import { LMarker } from 'vue2-leaflet';。