Vue返回顶部按钮组件封装

BackTo 组件的template部分

<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的混入封装，因为很多组件都用到了这个方法，所以我们需要将其封装起来，以后使用方便

//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） scrollTo(x,y,time=300){ this.scroll.scrollTo(x,y,time) } // x表示横轴坐标，y表示纵轴坐标，time表示延迟的时间

BackTo组件的使用

导入混入

import {backTopMixin} from "@/common/mixin/mixin";
//backTopMixin是将backTo混入封装给函数起的名字，
// "@/common/mixin/mixin";保存混入模式的路径

引用混入

mixins:[backTopMixin],

给BackTo绑定事件

<back-to @click.native="BackTo" v-show="isShow"></back-to>
 //@click.native因为给组件绑定事件，所以不能直接用@click，而是用/@click.native

BackTo(){
            this.$refs.BScroll.scrollTo(0,0,300)
        },

总结

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