如何触发 $('.button-collapse').sideNav('hide');在没有 jQuery 的 vuejs 2 中？

Question

我已经成功添加了以下代码，它为我提供了 materialise 的 sideNav：

<v-btn-link v-side-nav:side-nav="nav" class="button-collapse btn-flat" id="btn-side-menu"><i class="material-icons">menu</i></v-btn-link>
<v-side-nav id="side-nav" class="hide-on-small">
  <a v-on:click="handleNavDashboard()">Dashboard</a>
  <a v-on:click="handleLogout()">Logout</a>
</v-side-nav>

我使用以下方法：

  methods: {
    handleLogout () {
      console.log('LOGGED OUT')
      this.$store.dispatch('clearAuthUser')
      window.localStorage.removeItem('authUser')
      this.$router.push({name: 'login'})
    },
    handleNavDashboard () {
      console.log('GOING DASHBOARD')
      console.log(this)
      this.$router.push({name: 'dashboard'})
    }
  }

因此，当我在主页上单击“仪表板”时，我在屏幕上看到了仪表板内容，但侧边导航菜单和变暗的背景仍然存在。 Materialise-css 说你可以使用这个函数

$('.button-collapse').sideNav('hide');

以编程方式隐藏它，但我没有安装 jQuery。单击导航后如何重置 sideNav？

Answer 1

如果要将 jQuery 包含到使用 requires 或 imports 的项目中，则需要确保它是 required 而不是使用script 标签，因为它会在编译代码的范围之外（除非它被填充），所以将以下内容添加到您的项目中：

ES6语法：

import jQuery from 'jquery';
window.$ = window.jQuery = jQuery

ES5 语法：

window.$ = window.jQuery = require('jquery');

并确保您已安装 jQuery:

npm install jquery --save-dev

这将 jQuery 置于全局范围内，因此可以在整个站点范围内使用。该包的文档并没有真正说清楚，出于某种原因，他们没有提到 jQuery 是一个依赖项，但查看代码显然是针对某些组件的。

Answer 2

CDN

来自 Materialise 文档：

One last thing to note is that you have to import jQuery before importing materialize.js!

<body>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>
</body>

NPM

更好的方法，通过 npm 安装 jQuery：

npm install jquery

并使用 webpack ProvidePlugin 使 jQuery 全局模块在您的所有文件中可用
这是 webpack.config.js 文件

的示例

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
})

在Vue.jsDOM操作被封装在指令中，你可以使用条件渲染指令v-if或v-show来在不使用 jquery:

的情况下完成这项工作

jsFiddle example

还要检查提供干净、语义和可重用组件的组件框架 Vuetify.js。

Answer 3

如果您不想使用 JQuery 和 Materialize，您可以使用指令 :v-show="showAside" 或 :v-if="showAside" 与属性类似 showAside （在数据中）并通过单击处理该值。

有一个非常快速和便宜的例子：https://jsfiddle.net/nosferatu79/p85rw6xz/

如何触发 $('.button-collapse').sideNav('hide');在没有 jQuery 的 vuejs 2 中？

How to trigger $('.button-collapse').sideNav('hide'); in vuejs 2 without jQuery?

materialize

vue.js

vuejs2