如何从 vuejs 中的 iziModal 获取按钮事件答案

【问题标题】：How to get button event from iziModal in vuejs如何从 vuejs 中的 iziModal 获取按钮事件
【发布时间】：2018-10-09 07:32:43
【问题描述】：

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

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>

【问题讨论】：

标签： javascript node.js vue.js electron electron-vue

【解决方案1】：

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,

【讨论】：