我是靠谱客的博主 追寻皮带,这篇文章主要介绍Vue返回顶部按钮组件封装Vue返回顶部按钮组件封装,现在分享给大家,希望可以做个参考。

Vue返回顶部按钮组件封装

BackTo 组件的template部分

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template> <div class="BackTo"> <van-icon name="upgrade" size="30px" color="orange"/> </div> </template> <script> export default { name: "BackTo", } </script> <style scoped> .BackTo{ position: absolute; right: 1.39vw; bottom: 13.89vw; } </style>

JS部分

  • **注意:**这里使用了Vue的混入封装思想
    • //Vue的混入封装,因为很多组件都用到了这个方法,所以我们需要将其封装起来,以后使用方便
    • Vue混入
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//BackTop import BackTo from "@/components/content/BackTo"; export const backTopMixin = { data(){ return{ isShow:false, } }, components:{ BackTo }, methods:{ //返回顶部操作 BackTo(){ this.$refs.BScroll.scrollTo(0,0,300) }, showBackTopBnt(position){ //显示返回顶部按钮 this.isShow = -(position.y) > 800 } } }
  • this.$refs.BScroll.scrollTo(0,0,300)调用的是Better-Scroll插件里面的方法
    • scrollTo(0,0,300)
    复制代码
    1
    2
    3
    4
    5
    scrollTo(x,y,time=300){ this.scroll.scrollTo(x,y,time) } // x表示横轴坐标,y表示纵轴坐标,time表示延迟的时间

BackTo组件的使用

  • 导入混入
复制代码
1
2
3
4
import {backTopMixin} from "@/common/mixin/mixin"; //backTopMixin是将backTo混入封装给函数起的名字, // "@/common/mixin/mixin";保存混入模式的路径
  • 引用混入
复制代码
1
2
mixins:[backTopMixin],
  • 给BackTo绑定事件
复制代码
1
2
3
<back-to @click.native="BackTo" v-show="isShow"></back-to> //@click.native因为给组件绑定事件,所以不能直接用@click,而是用/@click.native
复制代码
1
2
3
4
BackTo(){ this.$refs.BScroll.scrollTo(0,0,300) },

总结

Mixin对于封装一小段想要复用的代码来讲是有用的,Mixin的优点是不需要传递状态,但缺点也显而易见可能会被滥用;

最后

以上就是追寻皮带最近收集整理的关于Vue返回顶部按钮组件封装Vue返回顶部按钮组件封装的全部内容,更多相关Vue返回顶部按钮组件封装Vue返回顶部按钮组件封装内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(78)

评论列表共有 0 条评论

立即
投稿
返回
顶部