vue-学习知识点总结（五）自定义指令，监听页面滚动

1、自定义指令

局部：

directives: {
  focus: {
  // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

使用：

<input v-focus>

全局：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

2、监听页面滚动

mounted() {
  # 页面高度
  this.height = this.$el.getBoundingClientRect().height
  window.addEventListener('scroll', this.handleScroll)
}

methods: {
  handleScroll(e) {
      // 网页正文全文高>网页可见区域高
      if (!this.isRead && document.body.scrollHeight > window.innerHeight) {
        console.log(true)
      }
    }
}

# 需要注销监听事件，避免污染其他路由页面beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll, true)
},

3、npm安装依赖包

npm i element-ui -S

# 等同于

npm install element-ui -S

使用 install -S 是保存到当前工程目录上。