我正在开发一个 vue.js 项目(版本 3)。我遇到了一种情况,我想将组件的渲染 HTML 视图用于当前组件的方法。
我在 Vue 项目中创建了以下 SVG 组件。
CircleWithTextSvg.vue
<template>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" width="20" height="20">
<g id="UrTavla">
<circle cx="10" cy="10" r="10" stroke="gray" stroke-width="1" :fill="fill" />
<text x="50%" y="50%" text-anchor="middle" stroke="black" stroke-width="1px" dy=".3em">{{text}}</text>
</g>
</svg>
</template>
<script>
export default {
props: {
text: {
type: String,
default: "1"
},
fill: {
type: String,
default: "white"
}
}
}
</script>
该组件基本上呈现一个内部有文本的圆圈。
如果我在主组件的模板部分中使用此组件,如下所示,那么它可以正常工作(显然)
主组件.vue
<template>
<circle-with-text-svg />
</template>
但我想将此 SVG 组件渲染输出作为选项发送给第三方。
真实用例:-实际上,我创建了这个单独的组件以在我的传单地图上显示为标记。现在的问题是我想在 MainComponent 的方法中使用这个 SVG 组件,这样我就可以将它用作 L.divIcon 的选项
当我尝试以下操作时
export default {
methods: {
generateMap(element) {
// ...
let icon = L.divIcon({
html: <circle-with-text-svg
fill="'#D3D5FF'"
text="1" />,
iconSize: [10, 10]
});
// ...
}
}
}
然后它给出了错误
支持实验性语法“JSX 当前未启用”
在react中,我们可以正常地在另一个组件的模板中使用该组件。但是我们如何在 vue.js 中实现这一点
通过查看错误,似乎 JSX 实验未启用。
有人可以告诉我如何实现这一目标吗?