Question

我想在导航栏中使用“下拉” css，因此我创建了一个组件；这是标头组件：

<template>
  <no-ssr>
    <div>
      <ul id='dropdown' class='dropdown-content'>
        <li><a href="#!">one</a></li>
        <li><a href="#!">two</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!">three</a></li>
        <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
        <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
      </ul>
      <div class="navbar-fixed">
        <nav>
          <div class="nav-wrapper">
            <div class="container">
              <a href="#!" class="brand-logo"><i class="material-icons right">home</i>Home</a>
              <ul class="right hide-on-med-and-down">
                <li><a class="dropdown-button" data-activates="dropdown" data-beloworigin="true" data-hover="true">Dopdown<i
                  class="material-icons right">arrow_drop_down</i></a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#"><i class="material-icons right">search</i>Search</a></li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </div>
  </no-ssr>
</template>

我不是那样运行npm install stuff...，我只是通过CDN导入实现的CSS；这是我的nuxt.config.js：

head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' },
      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css'}
    ],
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' },
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js' }
    ]
  },

当我在本地主机上运行“ npm run dev”时，“下拉列表”不起作用；当我将鼠标移到该按钮上时，什么也没有发生，当我单击该按钮时，也什么也没有发生。我偶然得到了错误有人可以帮我解决这个问题吗？我真的很感激。

Answer 1

首先，您需要一个按钮/链接，以打开您的第一个下拉菜单。（请注意“数据目标”-属性）

<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider" tabindex="-1"></li>
    <li><a href="#!">three</a></li>
    <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
    <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>

然后您需要初始化此按钮：

$('.dropdown-trigger').dropdown();

请参见https://materializecss.com/dropdown.html

Answer 2

最后，它可以工作。我在mount（）函数中添加了Initialization，这是代码

mounted() {
      $('.dropdown-button').dropdown({
          inDuration: 300,
          outDuration: 225,
          constrainWidth: true, // Does not change width of dropdown to that of the activator
          hover: true, // Activate on hover
          gutter: 0, // Spacing from edge
          belowOrigin: true, // Displays dropdown below the button
          alignment: 'left', // Displays dropdown with edge aligned to the left of button
          stopPropagation: false // Stops event propagation
        }
      );
    }

如何在nuxt.js中使用实体化CSS CDN？

2 个答案: