在Vue中创建实体化吐司动作

Question

我使用materialize.css创建Toast

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方法将被调用？

Answer 1

materialize（core）不是VUE框架。例如，无法使用toastHTML并将v-on:click放入其中：

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

使用“常规” javascript onclick：

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

示例：

单击“撤消”以删除吐司。

<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>