Создайте материализованный тост в Vue - PullRequest
Новая
       71

Создайте материализованный тост в Vue

0 голосов
/ 21 марта 2020

Я использую материализацию. css, чтобы создать Тост 

const toastHTML = '<span>I am toast content</span><button class="btn-flat toast-action">Undo</button>';
M.toast({html: toastHTML});

Я запускаю тост из-за действия в моем Vue компоненте. Я хотел бы отреагировать на событие из тоста в моем компоненте. 

const toastHTML = '<span>I am toast content</span><button @click="undo" class="btn-flat toast-action">Undo</button>';
M.toast({html: toastHTML});

Как мне обернуть тост, чтобы был вызван мой метод undo?

1 Ответ

2 голосов
/ 21 марта 2020

материализация (ядро) не является VUE рамкой. Например, нельзя поджарить HTML и поместить v-on:click внутрь («отменить» HTML визуализировать с помощьюizeize javascript): 

/* @click="undo" not working */
const toastHTML = '<button @click="undo" class="btn-flat toast-action">Undo</button>';

Использовать «обычный» javascript onclick : 

/* working */
const toastHTML = '<span>I am toast content</span><button onclick="sayHello()" class="btn-flat toast-action">Undo</button>';

Идея также верна для обратных вызовов (Нет способа связать vue методы).

Пример:

Нажмите «отменить», чтобы удалить тост. 

<div id="example">
  <!-- `greet` is the name of a method defined below -->
  <button class="waves-effect waves-light btn btn-large" v-on:click="greet">Show toast</button>
</div>

<!-- Compiled and minified CSS -->
<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>

<!-- vue -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

<script>
  function sayHello() {
    console.log("say Hello");
    // Get toast DOM Element, get instance, then call dismiss function
    var toastElement = document.querySelector('.toast');
    var toastInstance = M.Toast.getInstance(toastElement);
    toastInstance.dismiss();
  }
  function completeCallbackFunction() {
    console.log("toast completeCallback");
  }

  var example = new Vue({
    el: '#example',
    // define methods under the `methods` object
    methods: {
      greet: function (event) {
        // Materialize.toast
        var toastHTML = '<span>I am toast content</span><button onclick="sayHello()" class="btn-flat toast-action">Undo</button>';
        M.toast({html: toastHTML, completeCallback: completeCallbackFunction});
      }
    }
  })
</script>
...