Question

我正在尝试在Vue中使用物化模式。

我已将其导入 main.js

import 'materialize-css'
import 'materialize-css/dist/css/materialize.css'
import 'materialize-css/dist/js/materialize.js'

File.vue

<a class="fa fa-trash modal-trigger" href="#delete" @click="consolel(index)"></a>

        <div id="delete" class="modal" ref="deleteModal">
          <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"
              @click="deleteItem(index)"
            >Agree</a>
          </div>
        </div>

mounted(){
     M.AutoInit();
}

我尝试过这种方式，文档要求触发模式

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

在已安装中。但这行不通。

如何在Vue中触发模式？！

Answer 1

另一种方法是简单地传递vue references数组并从VNode派生基础节点。

M.Modal.init([this.$refs['deleteModal'][0]], null)

实现CSS模态不适用于Vue

1 个答案: