我需要添加一个动态导入的组件,只需将虚拟标签添加到 DOM 结构中的特定位置即可。不幸的是,我发现的每一种方法都没有解决我的问题。
我首先如何尝试:
父组件(Editor.vue):
<template>
<div>
<div class="toolbar">
<button @click="addContainer">ADD CONTAINER</button>
</div>
<div id="editor" ref="editor" contenteditable="true">
//here, when in conteneditable div is coursor I need to add dynamically, programically virtual tag <container />
</div>
</div>
</template>
和 JavaScript
<script>
import container from '../container/Container.vue';
export default {
name: "editor",
components: {
container
},
data() {
return {};
},
methods: {
addContainer(){
document.execCommand('insertHTML', false, <container />); // execCommand let me add html in specyfic place, but I have error Unexpected token
}
},
};
子组件必须在用户需要的确切位置添加用户需要的次数(Container.vue)
<template>
<div
class="container editor--space"
@mouseover="highlightIn"
@mouseout="highlightOut"
contenteditable="true"
>
<div
class="editor--labelspace"
v-if="showLabel"
contenteditable="false"
>
container
</div>
{{ container }}
</div>
</template>
和 JavaScript
<script>
export default {
name: "container",
data() {
return {
showLabel: false,
container: "Container here ..."
};
},
methods: {
highlightIn(){
this.showLabel = true;
},
highlightOut(){
this.showLabel = false;
}
}
};
</script>
也许有人可以给我一些想法,该怎么做?