Как закрыть Modal de Materialise CSS с помощью Vue - PullRequest
Новая
       8

Как закрыть Modal de Materialise CSS с помощью Vue

0 голосов
/ 13 октября 2018

Я пытаюсь закрыть Модал Материализации CSS, если проверка правильна, но я не могу найти форму.

Самым простым делом была проверка типа: v-if = "showModal", и она работает, но оставляет фон модальной, и, хотя щелчок не исчезает.Фон является классом с именем 'modal-overlay'

Это мой код: 

     <i class="material-icons modal-trigger tooltipped" style="margin-left: 2px; 
     color:#ffc107; cursor:pointer;" @click="getById(article), fillSelectCategories(), 
     titleModal='Edit', type='edit'" data-target="modal1">edit</i>

Я импортировал M из файла JS MaterilizeCSS 

import M from "materialize-css/dist/js/materialize.min";

Метод: 

    update(){
       var elem = document.querySelectorAll('.modal'); 
       var instance = M.Modal.getInstance(elem);
       console.log(instance)

Возвращает 'undefined'

Я тоже пытался использовать метод update (): 

var elem = document.querySelectorAll('.modal');
elem.close();
M.Modal.close()

Я инициализируюмодальный от установленного и работает нормально, но я не могу закрыть его в тот момент, когда мне это нужно. 

mounted(){
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, options);
}

Но я знаю, что еще попробовать: (

1 Ответ

0 голосов
/ 13 октября 2018

Трудно понять, почему у вас ничего не получается, не углубляясь в ваш код, но я создал этот простой пример, чтобы продемонстрировать, как это можно сделать .. 

new Vue({
  el: "#app",
  data: {
    modalInstance: null,
    closeAfterTimeElapsed: true,
    seconds: 1
  },
  mounted() {
    const modal = document.querySelector('.modal')
    this.modalInstance = M.Modal.init(modal)

    const select = document.querySelector('select');
    M.FormSelect.init(select);

    M.updateTextFields();
  },
  methods: {
    handleClick() {
      if (this.closeAfterTimeElapsed) {
        setTimeout(() => { this.modalInstance.close() }, this.seconds * 1000)
      }
    }
  }
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>


<div id="app">

  <!-- Modal Trigger -->
  <button @click="handleClick" data-target="modal1" class="btn modal-trigger">Modal</button>
  
  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>

  <br>
  <br>

  <div class="row">
    <div class="input-field col s6">
      <select v-model="closeAfterTimeElapsed">
        <option :value="false">False</option>
        <option :value="true">True</option>
      </select>
      <label>Close Modal After</label>
    </div>

    <div class="input-field col s6">
      <input id="seconds" type="number" v-model="seconds">
      <label for="seconds">Seconds</label>
    </div>
  </div>
  
</div>

См. JSFiddle

...