Question

早上好，我对vue.js很陌生，想要一个导航栏，默认情况下它是透明的，但是在滚动时会更改其背景。不幸的是，它不起作用。我尝试了一个fe解决方案，但是这些都没有用。因此，此JavaScript代码是Stack Overflow中的一个示例，该示例可在Fiddle中使用。如果您需要更多信息和/或代码，请告诉我。

Navigation.vue

<template>
    <div id="navigation"> 
        <nav class="nav-items"> 
            <router-link class="item" to="/home">Home</router-link>
            <router-link class="item" to="/about">About</router-link>
            <router-link class="item" to="/japan">Japan</router-link>
        </nav> 
    </div>
</template>

<script>
export default {
    name: 'navigation'
}

import scroll from '../assets/js/scroll.js';

</script>

scroll.js

const navbar = document.querySelector('#navigation')

window.addEventListener('scroll', function(e) {
  const lastPosition = window.scrollY
  if (lastPosition > 50 ) {
    navbar.classList.add('colored')
  } else if (navbar.classList.contains('colored')) {
    navbar.classList.remove('colored')
  } else {
    navbar.classList.remove('colored')
  }
})

navigation.scss

仅供参考：我已在此处删除了不必要的代码。

#navigation {
    background: transparent;

    .colored {
        background: #fff;
        transition: 0.3s;
    }

}

Answer 1

注意：：要查看如何在Vue组件中导入自定义代码（一般情况），请向下滚动到最后一个<hr>。

Vue是一个JavaScript框架，因此您可以在其中的任何位置插入原始代码，并且可以完美运行。

恕我直言，您的问题与导入原始代码无关。这是关于在正确的时间运行它。

您必须在{{3}}钩子内运行代码，因为那是#navigation在DOM中存在的时间：

Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('navigation', {
  template: '#navigationTemplate',
  mounted() {
    window.addEventListener('scroll',
      () => document.querySelector('#navigation')
      .classList.toggle('colored', window.scrollY > 50)
    )
  }
})

new Vue({
  el: '#app'
});

#app {
  min-height: 200vh;
  background: url("https://picsum.photos/id/237/1024/540") no-repeat center center /cover;
}

#navigation {
  background: transparent;
  position: fixed;
  top: 0;
  padding: 1rem;
  transition: 0.3s;
  width: 100%;
  box-sizing: border-box;
  color: white;
}

#navigation.colored {
  background: rgba(255, 255, 255, .85);
  color: black;
}

body {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script id="navigationTemplate" type="text/template">
  <div id="navigation">
    <nav class="nav-items">
      <a class="item" to="/home">Home</a>
      <a class="item" to="/about">About</a>
      <a class="item" to="/japan">Japan</a>
    </nav>
  </div>
</script>
<div id="app">
  <navigation />
</div>

您的scroll.js可以安全地写为：

window.addEventListener('scroll',
  () => document.querySelector('#navigation')
  .classList.toggle('colored', window.scrollY > 50)
)

您的SCSS似乎不正确：

#navigation {
  .colored {
    declaration
  }
}

会将declaration应用于类别为.colored且元素为{strong> 的元素id为{{ 1}}。但是您的代码会在navigation上切换类colored 。因此，您的SCSS应该如下所示：

#navigation

可能看起来不多，但是#navigation { &.colored { declaration } }使您的代码适用（或不适用）。

您可能想将&应用于transition，因为它在具有#navigation类 以及没有的情况下应适用。如果您不这样做，则返回动画（从colored到.colored）将不会被设置动画。

为了记录并回答您的第一个问题，将自定义代码导入Vue组件的 正确方法 是：

a）将代码导出为函数：
（在scroll.js中）

:not(.colored)

b）导入：
（在您的组件中）

export function menuScroll = function() {
  /* your custom code here */
}

c）完全在您需要的地方运行它：
（即：已安装）

import { menuScroll } from 'path/to/scroll'

很显然，您想根据功能/用途和项目的命名约定重命名该功能。

最后但并非最不重要的一点是，如果您的函数需要使用参数，则可能需要将其用作方法：

export default {
  name: 'navigation',
  mounted() {
    menuScroll();
  }
}

...，以及组件中的

export function someName = function(...args) {
  /** do stuff with args **/
}

Answer 2

就是这样

<template>
   .... your HTML
</template>

<script>
  export default {
    data: () => ({
      ......data of your component
    }),
    mounted() {
      let recaptchaScript = document.createElement('script')
      recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
      document.head.appendChild(recaptchaScript)
    },
    methods: {
      ......methods of your component
    }
  }
</script>

源：Link

如何在vue.js项目中添加普通JavaScript？

Navigation.vue

scroll.js

navigation.scss

2 个答案: