Vue Js открыть блокнот в Vue-JS-модал

Question

Я новичок с Vue и пытаюсь открыть альбом для рисования внутри vue-js-modal.

Я не уверен, что я здесь не так делаю.

Я использую VueModal и vue-signature-pad .

Отлично работает на странице, но я не могу запустить его в модальном режиме.

Вот ссылка на codesandbox

App.vue код следующий

<template>
  <div id="app">
    <v-dialog />
    <div class="container">
      <div class="row">
        <div class="col-12 mt-2">
          <div class="col-6 mt-2">
            <button class="btn btn-secondary" @click="showButtonsDialog">
              Open Dialog
            </button>
          </div>
        </div>
       <div class="col-12 mt-2">
          <VueSignaturePad
            id="signature"
            width="100%"
            height="100%"
            ref="signaturePad"
          />
        </div>            
      </div>
    </div>
  </div>
</template>

<script>
    export default {
    name: "App",
    methods: {
       showButtonsDialog() {
           this.$modal.show("dialog", {
           title: "Some Title",
           text:'<VueSignaturePad id="signature" width="100%" height="200px" ref="signaturePad"/>',
           buttons: [
           {
               title: "CANCEL",
               handler: () => {
                   this.$modal.hide("dialog");
               }
           }]
          });
        }
      }
    };    
</script>

Что я здесь не так делаю?

Спасибо

Answer 1

Я думаю, text работает только с простым текстом, а не с компонентом Vue.Чтобы включить компонент Vue в свой модал, вы можете объявить его в шаблоне

  <modal name="example"
   width="80%"
   height="80%">
      <VueSignaturePad
        id="signature"
        width="100%"
        height="100%"
        ref="signaturePad"
      />
  </modal>

и когда вы хотите показать его

showButtonsDialog() {
  this.$modal.show("example")
}

Демо на Codesandbox