如何在 Vue.js 中集成 mmenu jQuery 插件? 我像这样在index.html中插入了mmenu:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/7.0.1/jquery.mmenu.all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/7.0.1/jquery.mmenu.all.js"></script>
因此,它被包含在整个项目中。但是,我无法在我的 Vue 组件中使用它。我在 created()
方法中初始化了 mmenu 插件:
created() {
$('#menu').mmenu();
}
和标记:
<a href="#menu">Menu</a>
<!-- The menu -->
<nav id="menu">
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/about">About</router-link></li>
<li><router-link to="/contacts">Contact us</router-link></li>
</ul>
</nav>
但是好像没用。我必须做什么才能使其正常工作?
最佳答案
如果有人仍然感兴趣,我这样解决了:
<template>
<div class="mobile-menu">
<a href="#menu">
<span></span>
</a>
<nav id="menu">
<!-- menu list to insert here -->
</nav>
</div>
</template>
<script>
import 'mmenu-js/dist/mmenu.css'
import 'mmenu-js/dist/mmenu.js'
export default {
mounted() {
new Mmenu(document.querySelector('#menu'))
document.addEventListener('click', evnt => {
let anchor = evnt.target.closest('a[href^="#/"]')
if (anchor) {
// Go somewhere
evnt.preventDefault()
}
})
}
}
</script>
关于javascript - 将 Mmenu 插件集成到 Vue.js 项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48516209/