自己封装一个公共组件，多配置。怎么拥有一个属于自己的组件轮子，并且是可复用的。例子为：返回顶部按钮组件

张小帅~

已于 2022-07-29 18:00:34 修改

阅读量585

点赞数

分类专栏：组件封装编程思想文章标签： vue.js javascript 前端

于 2022-07-29 17:58:06 首次发布

本文链接：https://blog.csdn.net/xiao_shuai_shua/article/details/126057972

版权

组件封装同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

编程思想

1 篇文章 0 订阅

订阅专栏

每个人都会拥有属于自己的轮子，如果你还不会，或者封装的不够好，看了接下来的文章，对你或许有帮助，你也试着封装一个复用高效的轮子

文章目录

一、为什么要封装组件？
- 组件是什么
二、怎么封装一个复用组件？
- 效果图展示
- js核心代码
总结

为什么要封装组件？

现在工作，不会封装组件都不好意思说自己是前端了，面试基本也是必问的。写移动端，开发经验丰富的老手，基本都不会使用ui库，例如vant，antd这些。因为他们已经拥有了属于自己的一套轮子库，毕竟自己写的用起来方便，虽然说性能可能会差一点，但是现在手机和电脑的性能，这些都看不出来

提示：以下是本篇文章正文内容，下面案例可供参考

一、组件是什么？

其实组件就是一个html文件，只不过在框架的作用下，写法bu'yu。

A页面，引入了B页面，B页面就是子页面，A就是父组件。

B页面就相当于appendChaild（"body"）到A页面的body里面

其实就是两段html，合并到了成了一个文件，引入在哪个DOM下就

appendChild（）到对应的父级下面。相当于插入一段html文件

二、怎么封装一个复用组件

1.举例为返回顶部按钮

这里以返回顶部案例为例，因为在很多地方都会使用到返回顶部，尤其时移动端在做列表的时候，

产品经理都会让你价格按钮点击回到顶部，如果你不满意ui的样式，就可以自己封装一个。

具体效果图如下：

html + css 代码如下：结构非常简单

<template>
  <div class="content">
    // style样式为动态配置，src为动态配置 这样可以实现图片，样式，大小的自由控制
    // 一般返回顶部都是一个icon图片，如果有文字或者别的，可以自己更改样式 
    <img v-show="showTopImg" :style="[myStyle]"  @click.stop="backTop" 
        :src="backIcon" :stopHeight="0" class="backTop"
    >
  </div>
</template>

//代码过多放在下面，对应是写在这里
<script><script>

//css样式 默认position定位
<style lang="scss" scoped>
    .backTop{
      position: fixed;
    }
</style>

2.js核心部分

组件封装的核心就是考虑到使用情况，所以我接收了四个参数，增加复用性

1、多少高度显示按钮

2、返回到多少高度停止

3、图片自定义

4、样式大小，位置自定义

5、每个赋值个默认值

6、做了一个防抖优化

代码如下（示例）：

<script>
import icon from '@/assets/icon/backTop.png' //一般返回顶部是个图片
export default {
  data() {
    return {
      showTopImg: false, //控制按钮显示
      timer: null, //方便退出时清除定时器事件
      timerId: null, //方便退出时清除定时器事件
      scrollTop: 0  //滚动高度

    }
  },
  props: {
    // 触底显示返回高度，默认2500
    backHeight: {
      typeof: Number,
      default: 2500
    },
    //返回到多少高度, 默认为0，返回顶部
    stopHeight: {
      typeof: Number,
      default: 0
    },
    // 父组件传下来的图片，没有取默认值
    backIcon: {
      typeof: String,
      default: icon
    },
    // 父组件传下来的样式，必须是对象，没有取默认值
    myStyle: {
      typeof: Object,
      default: () => {
        return {
          width: '66px',
          height: '66px',
          right: '10px',
          bottom: '68px'
        }
      }
    }
  },
  mounted() {
    //注册监听滚动事件
    window.addEventListener('scroll', this.debounce, true)
  },
  destroyed() {
    // 退出时清除监听事件
    window.removeEventListener('scroll', this.debounce)
    window.clearInterval(this.timerId)
    window.clearTimeout(this.timer)
  },
  methods: {
    backTop() {
      this.timerId = setInterval(() => {
        // 给返回增加动画效果
        const speed = Math.floor(-document.documentElement.scrollTop / 5)
        document.documentElement.scrollTop = document.documentElement.scrollTop + speed
        // 返回顶部时清除定时器
        if (document.documentElement.scrollTop <= this.stopHeight) {
          clearInterval(this.timerId)
        }
      }, 30)
    },
    // 防抖函数
    debounce(ev) {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        // 当滚动的距离大于时出现该按钮
        this.scrollTop = window.pageYOffset
        this.scrollTop > this.backHeight ? 
        this.showTopImg = true : this.showTopImg = false
      }, 200)
    }
  }
}
</script>

到这儿组件就写好逻辑了，可能有写的不好的地方，借鉴一下就可以了。

3.其他页面进行引用, 导入进来就可以了

<template>
  <div class="content">
    //  到一定距离显示出来        自定义图片                自定义样式
    <backTop :backHeight="2000" :icon="https://xxxx.com" :myStyle="style"/>
  </div>
</template>

<script>
// 引入对应的组件路径
import backTop from '@/components/backTop'
export default {
  name: 'demo',
  // 局部注册组件
  components: {  backTop },

  data() {
    return {
       style:{
          width:"80px",
          hieght:"80px",
          right:"20px",
          bottom:"50px",
          backgroundColor:""
       {
    }
  },
  created() {},
  methods: {}
}
</script>

<style lang="scss" scoped>

</style>