vue与animate.css 结合使用在可视区域内动态展示的自定义指令
2021-03-27 07:26
标签：自定义指令 client dir listener 使用 listen bin 展示 ddc 1、vue自定义指令 2、使用方式 vue与animate.css 结合使用在可视区域内动态展示的自定义指令 标签：自定义指令 client dir listener 使用 listen bin 展示 ddc 原文地址：https://www.cnblogs.com/wjs0509/p/12632912.htmlVue.directive(‘class‘, {
inserted: function (el, binding) {
// 聚焦元素
binding.addClass = () => {
const { top } = el.getBoundingClientRect()
const h = document.documentElement.clientHeight || document.body.clientHeight
if (top h) {
el.className = binding.value
if (binding.addClass) {
window.removeEventListener(‘scroll‘, binding.addClass)
}
}
}
window.addEventListener(‘scroll‘, binding.addClass)
binding.addClass()
},
unbind: function (el, binding) {
if (binding.addClass) {
window.removeEventListener(‘scroll‘, binding.addClass)
console.log(‘取消事件绑定‘)
}
}
})
上一篇：js 最简单的发布订阅模式
下一篇：【译】HTML表单样式
文章标题：vue与animate.css 结合使用在可视区域内动态展示的自定义指令
文章链接：http://soscw.com/index.php/essay/68474.html