修改vant框架组件，实现tab组件增加自定义事件

修改vant框架中的Tab标签页组件

在使用vant组件中，项目需要我们把框架的组件修改，加多一个按钮，用做用户的偏好设置
需求：要求按钮不能影响组件的欢动效果，并且也要拥有组件的粘性定位布局

组件：

我们修改框架组件是很麻烦的事情，vue的vant 不能直接修改组件结构，所以我们不会使用修改结构的方法，修改标签的数据也会很麻烦，所以我们直接选择修改组件样式

页面检测元素，我们发现可以给van-sticky一个padding-right样式（先给空间），再给它一个伪类元素，把加号显示出来

.index {
//这里我使用了深度选择器
  /deep/.van-sticky {
    padding-right: 40px;
    &::after {
      content: "+";
      width: 40px;
      height: 44px;
      position: absolute;
      right: 0;
      top: 0;
      font-size: 30px;
      color: #333;
      text-align: center;
      background-color: #fff;
      line-height: 38px;
    }
  }

修改了样式可以有了显示没有问题，之前的功能也没有问题了！
我们要怎么添加事件？伪元素是不能直接添加事件的
这里我们要转变一下想法，利用事件冒泡的作用，当我点击其他标签页的时候都有其他的样式，只有我点击加号的时候我的样式名是van-sticky

我这里就直接用原生的js代码在vue组件里面写了

//在钩子函数里面写一个原生方法
mounted() {
 document.querySelector(".van-sticky").onclick = (e) => {
      console.log(e.target.className);
      if (e.target.className==="van-sticky") {
        this.$router.push({ name: "categoryMannager" });
      }
    };
  },

这样就能实现点击
但是还发现一个问题，如果页面下来，van-sticky 的class名会改变

最终实现 我们需要
我这里就直接用原生的js代码在vue组件里面写了

//在钩子函数里面写一个原生方法
mounted() {
 document.querySelector(".van-sticky").onclick = (e) => {
      console.log(e.target.className);
      if (e.target.className.indexOf("van-sticky") > -1) {
        this.$router.push({ name: "categoryMannager" });
      }
    };
  },

这样我们就能滚动也能点击了，这个小坑也填了！