vue自定义指令(元素出现在可视区域添加class)

发布: 2018-07-16 23:41:12标签: vue

自定义指令(元素出现在可视区域添加class)

01export default {
02  inserted: function (el, binding) {
03    // 聚焦元素
04    binding.addClass = () => {
05      const { top } = el.getBoundingClientRect()
06      const h = document.documentElement.clientHeight || document.body.clientHeight
07      if (top < h) {
08        el.className = binding.value
09        if (binding.addClass) {
10          window.removeEventListener('scroll', binding.addClass)
11        }
12      }
13    }
14
15    window.addEventListener('scroll', binding.addClass)
16
17    binding.addClass()
18  },
19  unbind: function (el, binding) {
20    if (binding.addClass) {
21      window.removeEventListener('scroll', binding.addClass)
22      console.log('取消事件绑定')
23    }
24  }
25}
26
复制代码

使用

01<h2 v-class='animated fadeInUp' v-for='item in 1000' :key='item'>测试测试测试</h2>
复制代码