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!