1

我在电子Vue中有一个应用程序。它建立在 nodejs 之上。我在我的应用程序中添加了 izimodal,它可以正常工作和显示。但我不能使用v-modeland @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>

4

1 回答 1

0

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,
于 2019-03-16T12:25:20.527 回答