vue 监听页面宽度变化 和 键盘事件

vue 监听页面窗口大小

export default {
  name: 'Full',
  components: {
    Header,
    Siderbar 
  },
  data () {
    return {
      screenWidth: document.body.clientWidth, // 屏幕宽度
      timer: false
    }
  },
  computed: { 
    isCollapse: {
      get () {
        return this.screenWidth < 768
      },
      set () {
      }
    }
  },
  watch: {
    screenWidth (val) {
      if (!this.timer) {
        this.screenWidth = val
        if (this.screenWidth < 768) {
          this.isCollapse = true
        }
        this.timer = true
        let that = this
        setTimeout(function () {
          that.timer = false
        }, 400)
      }
    }
  }, 
  mounted () {
    // 监听窗口大小
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
  },
  methods: {
    changeMenu () {
      this.isCollapse = !this.isCollapse
    }
  }
}

vue enter 事件

 created () {
    document.onkeyup = (e) => {
      if (e.keyCode === 13) {
        this.fun()
      }

    }
  },
posted @ 2019-01-24 12:46  Mr.曹  阅读(11483)  评论(0编辑  收藏  举报