[JavaScript知识库]vue封装返回顶部组件

父组件

<template>
  <div>
      <top gotop="150"></top>
  </div>
</template>

<script>
import top from "@/components/goTop.vue"
export default {
    components:{
        top
    }
}
</script>

<style>

</style>

子组件

<template>
  <div class="app">
    <div class="con">
      <div class="triangle" @click="top" v-show="isshow"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    gotop: {
      type: String,//字符串类型
      default: "200",//默认为200
    },
  },

  data() {
    return {
      isshow: false,//是否显示变量
    };
  },
  mounted() {
    // 监听页面滚动距离,滚动距离超过一定高度时显示返回顶部的三角
    window.addEventListener("scroll", (e) => {
      const scrolltop = document.documentElement.scrollTop;
      if (scrolltop >= this.gotop) {
        this.isshow = true;
      }
      if (scrolltop == 0) {
        this.isshow = false;
      }
    });
  },
  methods: {
    top() {
      document.documentElement.scrollTop = 0;
    },
  },
};
</script>

<style lang="scss" scoped>
.app {
  position: relative;
}
// 给父盒子设置绝对定位右下角，里面三角水平垂直居中
.con {
  position: fixed;
  bottom: 50px;
  right: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

// 返回顶部的三角形
.triangle {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-color: transparent transparent red transparent;
  border-width: 0px 20px 30px 20px;
}
</style>

效果

?