首页 > web前端 > js教程 > css和js的装载与执行(附代码)

css和js的装载与执行(附代码)

不言
发布: 2019-03-15 14:05:13
转载
2013 人浏览过

本篇文章给大家带来的内容是关于css和js的装载与执行(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

要求

假定现在有路由/news,/login监听键盘事件,只允许在/news页面内有效不管后面跳到哪个页面,都不会触发对应的键盘事件,只能在/news里才触发

问题

没有进入/news之前,按键盘上的键,不会触发事件,进过/news后,不管有没有按键盘上的键,再跳到别的页面,按键盘上的键,都会触发事件

代码

srcviewsnews.vue

<template>
  <div>
    news
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true, //底部图片列表显示隐藏
      name: "aa"
    };
  },
  methods: {
    keyLeft() {
      alert(this.name);
    },
    keyUp() {
      alert("向上方向键");
    },
    keyRight() {
      alert("向右方向键");
    },
    keyDown() {
      alert("向下方向键");
    },
    keys() {
      var that = this;
      document.onkeydown = function(e) {
        let key = window.event.keyCode;
        if (key == 37) {
          that.keyLeft();
        } else if (key == 38) {
          that.keyUp();
          return false; //有上下滚动条的时候,不向上滚动
        } else if (key == 39) {
          that.keyRight();
        } else if (key == 40) {
          that.keyDown();
          return false; //有上下滚动条的时候,不向上滚动
        }
      };
    }
  },
  created() {
    if (this.flag == true && this.$route.path == "/news") {
      this.keys();
    }
  },
  mounted() {}
};
</script>
登录后复制

以上是css和js的装载与执行(附代码)的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:segmentfault.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板