javascript - 如何从Vue.js中的iziModal获取按钮事件

我在 Electron Vue中有一个应用程序。它建立在nodejs之上。我在应用程序中添加了izimodal，它可以正常工作并显示。但是我不能使用v-model和@click="dntok"。这意味着我无法获得按钮事件，并且文本框的绑定(bind)也无法正常工作。我如何获取按钮事件和文本字段中的文本。

let jquerys = require("../assets/js/jquery-3.2.1.min.js");
var izm = require("../assets/js/iziModal.js");

export default {
  name: "modaltemplate",
  data: () => ({
      btKey: "",
      btSecret: "",
      }),
      created() {
        this.initialize();
      },
      methods: {
        initialize(){

         $("#btxconfigs").iziModal({
                    title: 'Bittrex Configs',
                    headerColor: '#88A0B9',
                    theme: 'light',
                    rtl: false,
                    width: 600,
                    radius: 3,
                    zindex: 999,
                    autoOpen: 0, // Boolean, Number
                    bodyOverflow: false,
                    transitionIn: 'comingIn',
                    transitionOut: 'fadeOutLeft',
                    transitionInOverlay: 'fadeIn',
                    transitionOutOverlay: 'fadeOut',

                });

      },
      openModal(){
       $('#btxconfigs').iziModal('open');
      },
      dntok(){
        console.log("Button Clicked. value : "+this.btKey+" - "+ this.btSecret);
      },
  }
}
 

@import '../assets/css/style.min.css';

@import '../assets/css/iziModal.css';

<button @click="openModal" >Click here to Open</button>

<div id="btxconfigs" class="iziModal setting-modal">
            <div class="row">
                <form class="col s12">
                    <div class="bluesection">
                        <div class="input-field col s12">
                            <input  type="text" v-model="btKey" class="blues-input" placeholder="Api Key">
                        </div>
                        <div class="input-field col s12">
                            <input  type="text" v-model="btSecret" class="blues-input" placeholder="Api Secrete">
                        </div>
                        <div class="bittrex-modal-footer izi-modalfooter">
                            <button type="button" class="btn btns no-border white-text blue-gradient waves-effect waves-light btn-skip izimodal-btn" data-dismiss="modal">Skip</button>
                            <button type="button" id="btsavebtn" @click="dntok"  class="btn btns no-border white-text blue-gradient waves-effect waves-light btn-savenext izimodal-btn">Save & Next</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

最佳答案

iziModal | v1.5.1

需要对库iziModal进行更改
请找到一些代码

: this.$element.html('<div class="' + a + '-wrap"><div class="' + a + '-content">' + this.content + "</div></div>"),

并替换为

: '',

也找到

h = this.$element.find("." + a + "-content")[0].scrollHeight, c = h + this.headerHeight,

并替换为

c = this.headerHeight,

之后，将样式添加到css

.iziModal {
    max-height: max-content;
}

重要的时刻
它可以与配置一起使用

appendTo: false,