Javascript 在Vue.js中动态创建元素

我想在单击画布时创建一个动态HTML模板

这就是我所尝试的：

var btn = document.createElement("div");
btn.classList.add("custom-signature-btn-row");
btn.classList.add("d-flex");
btn.innerHTML = `
    <div class="btn-grid d-flex mr-2">
        <span class="element-icon drag-icon md-icon sign-btn">drag_indicator</span>
        <button class="md-button md-primary md-theme-default button-custom-regular" v-on:click="toggleSignature()">
            Signature
        </button>
        <div class="signature-dropdow" v-bind:class="{ active: isActive }">
            <ul>
                <li>
                    <div class="md-layout-item">
                        <div class="md-field">
                            <label for="movie">Assigned to Anyone</label>
                            <select name="movie" class="md-select" id="movie">
                                <option class="md-option" value="fight-club">Fight Club</option>
                                <option class="md-option" value="godfather">Godfather</option>
                            </select>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
`;

document.addEventListener('click', function(event) {
    if (event.target && event.target.classList.contains("pdf-canvas")) {
        console.log(event.target.parentNode);
        event.target.parentNode.appendChild(btn);
    }
});

var btn=document.createElement（“div”）；
添加（“自定义签名btn行”）；
btn.classList.add（“d-flex”）；
btn.innerHTML=`
阻力指示器
签名


分配给任何人
搏击俱乐部
教父


`;
document.addEventListener（'click'，函数（事件）{
if（event.target&&event.target.classList.contains（“pdf画布”））{
console.log（event.target.parentNode）；
event.target.parentNode.appendChild（btn）；
}
});

---

上述代码的问题是

v-bind

，

v-on

无法使用此方法。

您可以通过编程方式渲染组件

首先，将图元作为组件移动，例如：

Button.vue

<template>
    <div class="custom-signature-btn-row d-flex btn-grid d-flex mr-2">
        <span class="element-icon drag-icon md-icon sign-btn">drag_indicator</span>
        <button class="md-button md-primary md-theme-default button-custom-regular" v-on:click="toggleSignature()">
            Signature
        </button>
        <div class="signature-dropdow" v-bind:class="{ active: isActive }">
            <ul>
                <li>
                    <div class="md-layout-item">
                        <div class="md-field">
                            <label for="movie">Assigned to Anyone</label>
                            <select name="movie" class="md-select" id="movie">
                                <option class="md-option" value="fight-club">Fight Club</option>
                                <option class="md-option" value="godfather">Godfather</option>
                            </select>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
  props: {
    active: false,
    toggleSignature: {
      type: Function,
      default: () => {}
    }
  }
}
</script>

---

Vue在内部将所有模板预编译为“”，以便它们可以构建虚拟DOM树。在这个过程中，所有的“v-on”和“v-bind”魔术都发生了——这就是为什么当您直接向DOM添加新节点时，它就不起作用了

您可以编写自己的渲染函数—Vue为您提供了“”函数（也称为“h”函数，按约定称为）。在那里，您可以指定所有子类、类、选择HTML标记、处理事件等

---

或者更简单的解决方案是（

），可能与“v-html”结合使用来处理“动态”部分，您可以将代码重构为普通的Vue组件：

Vue.component（'dynamic-btn'{
数据：（）=>({
是的
}),
方法：{
toggleSignature（）{
console.log（'Clicked！'）
}
},
模板：`
阻力指示器
签名


分配给任何人
搏击俱乐部
教父


`
});
新Vue({
el:“#应用程序”，
数据：（）=>({
b计数：1，
}),
});
Vue.config.productionTip=false；
Vue.config.devtools=false

创建组件
我是vuejs新手，使用SFC时，我不明白我的SFC中的$el是什么，我在mounted（）部分使用这个eventListener。$el是指Vue在组件上创建的根HTML元素。很抱歉，我没有$el，
新的Vue（{router，store，render:h=>h（App）}）。$mount（“#App”）
这是我的app.js如果你指的是
按钮实例$el
，这与你指的
el
无关。我使用的是SFC，上面的组件将如何附加到单击的画布上？你必须在你的问题中包括画布部分，我才能回答画布是动态创建的，你可以在这里看到一个例子，我更新了我的答案，加入了SFC语法。至于如何将其附加到画布上，我真的不知道。你的沙盒太多了，我看不懂。如果你能创建一个，我会尽我最大的努力。只需在预览输出窗口中检查元素。你不必看代码。画布本身是通过上传的pdf动态生成的。我对Vue.js有点陌生。请您创建一个JSFIDLE，以便我可以更清楚地了解如何将组件附加到单击的画布或div中
import Vue from 'vue';
import Button from './Button.vue';

...

document.addEventListener('click', function(event) {
    if (event.target && event.target.classList.contains("pdf-canvas")) {
        const ButtonClass = Vue.extend(Button);
        const buttonInstance = new ButtonClass({
            propsData: { 
                isActive: this.isActive, // pass any data you need here
                toggleSignature: this.toggleSignature, // callback
            }
        });
        buttonInstance.$mount();
        event.target.parentNode.appendChild(buttonInstance.$el);
    }
});