Vue 3: Why vue yandex maps package doesn#39;t work in vue 3 with defineCustomElement feature?(VUE 3:为什么VUE Yandex地图包不能在VUE 3中使用定义客户元素功能?)
问题描述
我有两个项目vue yandex maps在第3季度:
第一个项目 Demo工作VUE Yandex地图的第一个项目。在此工程包中注册如下:
代码main.js
其中注册的VUE-Yandex-map组件来自js
文件:
代码MapComponent.vue
包vue-Yandex-map的使用位置:
编码App.vue
使用组件位置MapComponent
:
第二个项目
Demo第二个项目使用了VUE版本defineCustomElement的新功能3.2,在使用包时收到错误消息vue-yandex-maps
:
未捕获的TypeError:无法读取NULL的属性(正在读取 ‘offsetWidth’)
代码main.js
注册位置vue-yandex-maps
来自js
文件的组件:
编码defineCustomElementWithStyles.js
:
编码Home.ce.vue
使用组件位置MapComponent
:
编码MapComponent.ce.vue
使用包位置vue-yandex-maps
:
问题
在使用vue-yandex-maps
和defineCustomElement
的second project中出现错误?
推荐答案
vue-yandex-maps
renders 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中使用定义客户元素功能?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!