Добавить кнопку html к внешнему компоненту Vue js - PullRequest
Новая
       61

Добавить кнопку html к внешнему компоненту Vue js

0 голосов
/ 27 февраля 2020

Я использую 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>

1 Ответ

1 голос
/ 27 февраля 2020

Вы можете создать кнопку, используя javascript, как показано ниже: 

...
const myElement = this.$refs.myVueDropzone.$el.querySelector(".dz-details");
var button = document.createElement("button");
button.innerHTML  = "New Button";
myElement.appendChild(button);
...
...