How to add "+" to the tab in vant to increase or decrease columns

When using vant, sometimes we need to set the tab column, we will choose to use the tab tab in vant

Like this:

First of all:

Set a padding value for the column and make a space for '+'

/deep/.van-sticky{
  padding-right: 50px;
}

Become like this

Then add a pseudo element to this container, because this tab bar is operated by the introduction of the vant component, it is not easy to change the structure, you can only start from its style

/deep/.van-sticky{
  padding-right: 50px;
  &::after{
    content: '+';
    position: absolute;
    width: 51px;
    height: 44px;
    background-color: #fff;
    top: 0;
    right: 0;
    text-align: center;
    line-height: 42px;
    font-size: 35px;
  }
}

The effect comes out

Then add entry to the column management '+', add it in mounted

document.querySelector('.van-sticky').onclick=e=>{  //只能是箭头函数,不然this指向不对
       console.log(e.target.className);  //看点击的是哪个元素
           if(e.target.className==='van-sticky'){  //除了'+'其他都是van-tab__text
                this.$router.push('/cateManager')   //路由跳转
               }
             }

ok!

 

 

 

Guess you like

Origin blog.csdn.net/weixin_48371382/article/details/109379743