组件库——返回顶部、计数器|青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天

一、项目简介：

随着前端技术的发展，业界涌现出了许多的UI组件库。例如我们熟知的ElementUI,Vant，AntDesign，IView等等。但是作为一个前端开发者，学会自己制作属于自己的UI组件库已经是很常见的技能了，此次笔记先介绍如何制作一个简易的下拉框组件，以及组件的样式，封装等等

本次介绍比较简单的两个组件：

1. 返回顶部
2. 计数器

希望有所帮助

二、组件实现过程：

返回顶部组件

实现返回顶部主要是监听浏览器的滚动事件，通过判断屏幕高度可以对按钮的显示隐藏进行控制。

主要代码：

  const onScroll = () => {
    if (document.documentElement.scrollTop > 50 || document.body.scrollTop > 50) {
      btnShow.value = 'block';
    } else {
      btnShow.value = 'none';
    }
  };
 onMounted(() => {
    window.addEventListener('scroll', onScroll);
  });
  const backTop = () => {
    const timer = setInterval(function () {
      const backTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      const speedTop = backTop / 10;
      document.documentElement.scrollTop = backTop - speedTop;
      if (backTop <= 10) {
        clearInterval(timer);
      }
    }, 10);
  };

其中speedTop为返回顶部的速度，在这边设置backTop/10是比较合适的，我们也可以不设置速度，直接到最顶部，直接让 document.documentElement.scrollTop=0即可

计数器组件

计数器的关键在于绑定input的值，而我们知道props的值在子组件是不可以直接被赋值的，那在vue3中我们可以使用reactive来实现在子组件改变props值的效果

<span class="number">{{ currentNum.value }}</span>

  const currentNum = reactive({
    value: Number as any,
  });

事件：

  const reduceCount = () => {
    if (currentNum.value >= props.minNum + 1) {
      currentNum.value--;
      emit('change-count', currentNum.value);
    }
  };
  const addCount = () => {
    if (currentNum.value < props.maxNum) {
      currentNum.value++;
      emit('change-count', currentNum.value);
    }
  };

然后我们要实现在输入框中输入数字时可以动态绑定数值，通过v-model实现，还有一个点就是输入的值要在我们设置好的最大最小值的范围内，所以还需要通过@blur来对输入框离开输入的焦点进行控制

<input @blur="judgeInput($event)" v-else type="text" v-model="currentNum.value" />

当小于最小值时，让它等于最小值，大于最大值时，等于最大值。

 const judgeInput = (e: any) => {
    console.log(e.target.value);
    if (e.target.value <= props.minNum) {
      currentNum.value = props.minNum;
      emit('change-count', currentNum.value);
    } else if (e.target.value >= props.maxNum) {
      currentNum.value = props.maxNum;
      emit('change-count', currentNum.value);
    }
  };

五、总结思考：

这两个组件都是比较基础的组件，但对于vue3的小白来说还是可以学到一些东西的，也有很多东西可以优化，比如返回顶部我们可以设置样式，计数器可以添加小数等等。