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
5scrollTo(x,y,time=300){ this.scroll.scrollTo(x,y,time) } // x表示横轴坐标,y表示纵轴坐标,time表示延迟的时间
BackTo组件的使用
- 导入混入
复制代码
1
2
3
4import {backTopMixin} from "@/common/mixin/mixin"; //backTopMixin是将backTo混入封装给函数起的名字, // "@/common/mixin/mixin";保存混入模式的路径
- 引用混入
复制代码
1
2mixins:[backTopMixin],
- 给BackTo绑定事件
复制代码
1
2
3<back-to @click.native="BackTo" v-show="isShow"></back-to> //@click.native因为给组件绑定事件,所以不能直接用@click,而是用/@click.native
复制代码
1
2
3
4BackTo(){ this.$refs.BScroll.scrollTo(0,0,300) },
总结
Mixin对于封装一小段想要复用的代码来讲是有用的,Mixin的优点是不需要传递状态,但缺点也显而易见可能会被滥用;
最后
以上就是追寻皮带最近收集整理的关于Vue返回顶部按钮组件封装Vue返回顶部按钮组件封装的全部内容,更多相关Vue返回顶部按钮组件封装Vue返回顶部按钮组件封装内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复