Question

因此，我想创建一个导航栏，而不是重新发明轮子，而是使用一些公共代码来加快我的MVP开发人员的速度。

基本上，我正在使用此导航条形码-https://codepen.io/PaulVanO/pen/GgGeyE。

但是我不确定如何在Vue代码中实现jquery部分（我已经制作了一个组件，通过html和css复制，现在只需要在其中集成jquery功能。）

这是我需要集成的Jquery代码。

$('#toggle').click(function() {
  $(this).toggleClass('active');
  $('#overlay').toggleClass('open');
});

如果有人能帮助我完成这项工作，我将非常感谢。

Answer 1

假设您将标记（html和css）作为一个组件的一部分，获取添加/删除类的切换将非常简单，您只需要有一个方法来切换活动状态和data属性即可数据。一个例子会更好，所以就去了。
在您的组件对象中：

{
    data() {
        return {
            isActive: false
        }
    },

    methods: {
        toggleMenu(){
            this.isActive = !this.isActive
        }
    }
}

在标记中，您需要这个

<div class="button_container" id="toggle" :class="{'active': isActive}" @click="toggleMenu">
    <span class="top"></span>
    <span class="middle"></span>
    <span class="bottom"></span>
</div>
------------------------------------
<div class="overlay" id="overlay" :class="{'open': isActive}">
<nav class="overlay-menu">
  <ul>
    <li ><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

那应该让您步入正轨，请注意我为v-on和v-bind使用了简写形式

编辑： Here's also a link to an updated pen with the whole example

在Vue.js组件中使用纯JS

1 个答案: