将 html 按钮附加到外部组件 Vue js
Append html button to external component Vue js
我正在使用 vue-dropzone
组件。我想在文件预览中添加自定义按钮。我通过参考获取预览元素。我可以更改样式或其他任何内容。但是当我添加 <button>New Button</button>
时,它是字符串而不是 html 按钮。我怎样才能做到这一点。您可以从下面的 codesandbox link 复制。
我怎样才能做到这一点?如果我能做到这一点,那么我会在该按钮上添加 onClick 事件。
<template>
<div>
<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>
</div>
</template>
<script>
import vue2Dropzone from "vue2-dropzone";
import "vue2-dropzone/dist/vue2Dropzone.min.css";
export default {
name: "App",
components: {
vueDropzone: vue2Dropzone
},
mounted: function() {
try {
let mockFile = { name: "testfile.jpeg", size: 111 };
this.$refs.myVueDropzone.manuallyAddFile(mockFile, "");
} catch (err) {}
const myElement = this.$refs.myVueDropzone.$el.querySelector(".dz-details");
myElement.append("<button>New Button</button>");
},
data: function() {
return {
dropzoneOptions: {
url: "https://httpbin.org/post",
addRemoveLinks: true,
dictRemoveFile: "Remove"
}
};
}
};
</script>
<style>
</style>
您可以使用 javascript 创建按钮,如下所示:
...
const myElement = this.$refs.myVueDropzone.$el.querySelector(".dz-details");
var button = document.createElement("button");
button.innerHTML = "New Button";
myElement.appendChild(button);
...
我正在使用 vue-dropzone
组件。我想在文件预览中添加自定义按钮。我通过参考获取预览元素。我可以更改样式或其他任何内容。但是当我添加 <button>New Button</button>
时,它是字符串而不是 html 按钮。我怎样才能做到这一点。您可以从下面的 codesandbox link 复制。
我怎样才能做到这一点?如果我能做到这一点,那么我会在该按钮上添加 onClick 事件。
<template>
<div>
<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>
</div>
</template>
<script>
import vue2Dropzone from "vue2-dropzone";
import "vue2-dropzone/dist/vue2Dropzone.min.css";
export default {
name: "App",
components: {
vueDropzone: vue2Dropzone
},
mounted: function() {
try {
let mockFile = { name: "testfile.jpeg", size: 111 };
this.$refs.myVueDropzone.manuallyAddFile(mockFile, "");
} catch (err) {}
const myElement = this.$refs.myVueDropzone.$el.querySelector(".dz-details");
myElement.append("<button>New Button</button>");
},
data: function() {
return {
dropzoneOptions: {
url: "https://httpbin.org/post",
addRemoveLinks: true,
dictRemoveFile: "Remove"
}
};
}
};
</script>
<style>
</style>
您可以使用 javascript 创建按钮,如下所示:
...
const myElement = this.$refs.myVueDropzone.$el.querySelector(".dz-details");
var button = document.createElement("button");
button.innerHTML = "New Button";
myElement.appendChild(button);
...