[英]Integrating Mmenu plugin to Vue.js project
如何在Vue.js中集成mmenu jQuery插件? 我将mmenu插入index.html中,如下所示:
<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>
但这似乎不起作用。 为了使其正常工作,我该怎么办?
首先检查控制台中是否没有javascript错误。 然后,在手册的帮助下,尝试使用API open()
方法打开面板。 我认为不只是Vue.js
如果仍然有人感兴趣,我可以这样解决:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.