vue原生可左右滑动的标签栏tabs

一个不依赖任何插件的tabs组件

手写的梯形和平行四边形互相的样式

文中的tabs使用的是div，可以用router-link标签替换，能对应路由跳转，，也可以添加关闭按钮icon

部分代码展示，手写左右滑动动画

toRight() {
      // 往右滚动
      // this.$refs.tagsP.scrollLeft = this.scrollNum;
      let distance = this.$refs.tagsP.scrollLeft;
      let scrollNum = distance + 200;
      let step = (distance - scrollNum) / 50;
      if (step < 0) step = -step;
      this.moveSlow(distance, scrollNum, step, true);
    },
    toLeft() {
      // 左滚动
      let distance = this.$refs.tagsP.scrollLeft;
      let scrollNum = distance - 200;
      if (scrollNum < 0) {
        scrollNum = 0;
      }
      let step = (distance - scrollNum) / 50;
      if (step < 0) step = -step;
      this.moveSlow(distance, scrollNum, step, false);
    },
    moveSlow(distance, total, step, LOR) {
      // 正向滚动 和 反向滚动
      if (LOR) {
        // 每隔1毫秒移动一小段距离，直到移动至目标至为止，反之亦然
        if (distance < total) {
          distance += step;
          this.$refs.tagsP.scrollLeft = distance;
          setTimeout(() => {
            this.moveSlow(distance, total, step, true);
          }, 1);
        } else {
          this.$refs.tagsP.scrollLeft = total;
        }
      } else if (!LOR) {
        if (distance > total) {
          distance -= step;
          this.$refs.tagsP.scrollLeft = distance;
          setTimeout(() => {
            this.moveSlow(distance, total, step, false);
          }, 1);
        } else {
          this.$refs.tagsP.scrollLeft = total;
        }
      }

咱也不恶心人，让充会员才能下载源码，源码直接奉上，有用的话还望点个星星，三连一波

源码地址，小手点个star丫