vue自定义指令

最新推荐文章于 2025-09-13 11:59:05 发布

转载最新推荐文章于 2025-09-13 11:59:05 发布 · 48 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dujunfeng/p/8310914.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用Vue.js实现的自定义指令，该指令能够使页面元素具备返回顶部的功能。通过监听点击事件并平滑滚动至页面顶部，提高了用户体验。

回到顶部 js文件

export default {
install (Vue) {
Vue.directive('back-top', {
inserted (el, binding) {
let e = binding.arg || 'click'
el.addEventListener(e, () => {
var top = document.body.scrollTop
var timer = setInterval(() => {
top -= 50
if (top <= 0) {
top = 0
clearInterval(timer)
}
document.documentElement.scrollTop = document.body.scrollTop = top
}, 20)
})
}
})
}
}

　　在mainjs引入 Vue.use('name')

转载于:https://www.cnblogs.com/dujunfeng/p/8310914.html