Vue自定义指令(回到顶部)

vue 专栏收录该内容
24 篇文章 1 订阅

常常页面中都有个回到顶部的按钮,点击可以让页面滚动到顶部部位。想这种操作DOM的元素适合封装成一个指令,使用也比较简单,比如这样:

<span v-back="50">
  top
</span>

这段代码表示滚动到顶部距离50像素的位置。

像指令一般会通过Vue插件的形式来注册到页面中,因为插件可以传递一些参数。

import VBack from 'v-back'

Vue.use(VBack, {
  el: '#wrapper',
  duration: 300,
  distance: '50px'
})

传递的参数分别表示

  1. el 是滚动的容器,通过CSS选择器获取页面中的元素。默认是window
  2. duration 是滚动需要的时间。默认是300
  3. distance 是什么时候开始出现操作的元素,默认是一直出现,传入 100px 表示滚动到100像素之后出现,传入 1page 表示滚动到1屏幕的高度之后出现。

查看源码:代码地址

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页

打赏

前端精髓

小礼物走一走,来CSDN关注我

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值