给Vue 实例添加一个 v-scroll (元素出现滚动条时的滚动指令)

223 阅读1分钟

在main.js中

Vue.directive('scroll', {
	inserted: function (el, binding) {
		function f(e) {
			binding.value(e, el)
		}
		el.addEventListener('scroll', f)
	}
})

组件中

<div v-scroll="handleScroll" :style="{overflow: 'auto', height: '600px', width: '500px'}">
    <p v-for="(item, index) in 50" :key="index">{{ item }}</p>
</div>
methods: {
    // 创建扫描控件
    handleScroll(e, el) {
        console.count(9)
        // console.log(el)
    },
}