VUE 3：为什么VUE Yandex地图包不能在VUE 3中使用定义客户元素功能？ [英] Vue 3: Why vue yandex maps package doesn't work in vue 3 with defineCustomElement feature?

问题描述

我有两个项目vue yandex maps在第3季度：

第一个项目

Demo工作VUE Yandex地图的第一个项目。在此工程包中注册如下：

代码main.js其中注册的VUE-Yandex-map组件来自js文件：

const { createApp } = require('vue');
import App from './App.vue';
import ymapPlugin from 'vue-yandex-maps/dist/vue-yandex-maps.esm.js';

const app = createApp(App);

app.config.isCustomElement = (tag) => tag.startsWith('y'); // <= This is doesn't work
app.use(ymapPlugin);
app.mount('#app');

代码MapComponent.vue包vue-Yandex-map的使用位置：

<template>
  <yandex-map :coords="coords">
    <ymap-marker
      marker-id="123"
      :coords="coords"
      :marker-events="['click']"
    ></ymap-marker>
  </yandex-map>
</template>

<script>
export default {
  name: 'MapComponent',
  setup() {
    return {
      coords: [54, 39],
    };
  },
};
</script>

编码App.vue使用组件位置MapComponent：

<template>
  <div id="app">
    <MapComponent />
  </div>
</template>

<script>
import MapComponent from './components/MapComponent.vue';

export default {
  name: 'App',
  components: {
    MapComponent,
  },
};
</script>

第二个项目

Demo第二个项目使用了VUE版本defineCustomElement的新功能3.2，在使用包时收到错误消息vue-yandex-maps：

未捕获的TypeError：无法读取NULL的属性(正在读取 ‘offsetWidth’)

代码main.js注册位置vue-yandex-maps来自js文件的组件：

import { defineCustomElement } from './defineCustomElementWithStyles'
import App from './App.ce.vue'
import store from './store'
import router from './router'
import ymapPlugin from 'vue-yandex-maps/dist/vue-yandex-maps.esm.js'

customElements.define(
  'app-root',
  defineCustomElement(App, {
    plugins: [store, router, ymapPlugin],
  })
)

编码defineCustomElementWithStyles.js：

import { defineCustomElement as VueDefineCustomElement, h, createApp, getCurrentInstance } from 'vue'

const getNearestElementParent = (el) => {
  while (el?.nodeType !== 1 /* ELEMENT */) {
    el = el.parentElement
  }
  return el
}

export const defineCustomElement = (component, { plugins = [] }) =>
  VueDefineCustomElement({
    props: component.props,
    setup(props) {
      const app = createApp()

      // install plugins
      plugins.forEach(app.use)

      app.mixin({
        mounted() {
          const insertStyles = (styles) => {
            if (styles?.length) {
              this.__style = document.createElement('style')
              this.__style.innerText = styles.join().replace(/
/g, '')
              getNearestElementParent(this.$el).prepend(this.__style)
            }
          }

          // load own styles
          insertStyles(this.$?.type.styles)

          // load styles of child components
          if (this.$options.components) {
            for (const comp of Object.values(this.$options.components)) {
              insertStyles(comp.styles)
            }
          }
        },
        unmounted() {
          this.__style?.remove()
        },
      })

      const inst = getCurrentInstance()
      Object.assign(inst.appContext, app._context)
      Object.assign(inst.provides, app._context.provides)
      console.log({ props })
      return () => h(component, props)
    },
  })

编码Home.ce.vue使用组件位置MapComponent：

<script>
export default {
  name: 'Home',
}
</script>

<script setup>
import HelloWorld from '@/components/HelloWorld.ce.vue'
import MapComponent from '@/components/MapComponent.ce.vue'
</script>

<template>
  <h2>Home</h2>
  <HelloWorld msg="hello world" />
  <MapComponent />
</template>

编码MapComponent.ce.vue使用包位置vue-yandex-maps：

<template>
  <yandex-map :coords="coords">
    <ymap-marker marker-id="123" :coords="coords" :marker-events="['click']"></ymap-marker>
  </yandex-map>
</template>

<script>
export default {
  name: 'MapComponent',
  setup() {
    return {
      coords: [54, 39],
    }
  },
}
</script>

<style>
.ymap-container {
  height: 600px;
}
</style>

问题

在使用vue-yandex-maps和defineCustomElement的second project中出现错误？

推荐答案

vue-yandex-mapsrenders a map container带有randomly generated ID即passed to the ymaps.Map constructor，随后使用它来查询元素的document。不幸的是，贴图容器呈现在app-root自定义元素的Shadow DOM中，该元素对document查询隐藏。因此，document.querySelector()返回null，并且ymaps.Map代码尝试通过null引用获取容器的大小，从而导致您观察到的错误。

您必须自己修补vue-yandex-maps，或提交GitHub issue以请求功能更改，其中您可以传入地图容器元素(来自自定义元素的Shadow DOM)而不是ID。它看起来像ymaps.Map already accepts either an element or a string ID，因此不需要进行其他更改。

这篇关于VUE 3：为什么VUE Yandex地图包不能在VUE 3中使用定义客户元素功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！