Vue返回顶部按钮组件封装

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的混入封装，因为很多组件都用到了这个方法，所以我们需要将其封装起来，以后使用方便
  • 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的优点是不需要传递状态，但缺点也显而易见可能会被滥用；