按照官方文档写的tabbar底部栏,由于项目主题色为红色,但是下方的文字激活时为绿色,目前通过覆盖样式临时处理,官方能否提供props供开发者修改?另外在真机上,文字下方有下划线,这个如何去掉?

<tabbar class="tab">
<tabbar-item :selected="this.$route.path === '/personalHome/selfOrder/'" @on-item-click="onItemClick(0)">
<img slot="icon" src="../../assets/img/order.png">
<img slot="icon-active" src="../../assets/img/order_active.png">
<span slot="label">本人预约</span>
</tabbar-item>
<tabbar-item :selected="this.$route.path === '/personalHome/otherOrder/'" @on-item-click="onItemClick(1)">
<img slot="icon" src="../../assets/img/helpOrder.png">
<img slot="icon-active" src="../../assets/img/helpOrder_active.png">
<span slot="label">帮人预约</span>
</tabbar-item>
<tabbar-item :selected="this.$route.path === '/personalHome/shareLink'" @on-item-click="onItemClick(2)">
<img slot="icon" src="../../assets/img/share.png" >
<img slot="icon-active" src="../../assets/img/share_active.png">
<span slot="label">分享链接</span>
</tabbar-item>
<tabbar-item :selected="this.$route.path === '/personalHome/questionnaire/'" @on-item-click="onItemClick(3)">
<img slot="icon" src="../../assets/img/gift.png">
<img slot="icon-active" src="../../assets/img/gift_active.png">
<span slot="label">有奖问答</span>
</tabbar-item>
自己样式去覆盖
- 打开文件
build/webpack.base.conf.js, 找到modeule.exports = vuxLoader, 修改如下(并保存)
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui', 'progress-bar', 'duplicate-style', {name: 'less-theme', path: 'src/style/vux_theme.less'}]
})
- 新建文件
src/style/vux_theme.less, 然后打开该文件vux_theme.less,添加代码(后面用到的其它vux样式变量也可以直接在此文件中添加)
@tabbar-text-active-color: red;
- 运行
npm run dev重启项目(目的是为了vux_theme.less文件被装在在vux系统中), 仅第一次需要, 以后不需要该重启操作
@chobits4 给力了我的铁
@chobits4 多谢大佬的分享
@chobits4 给力了,膜拜大佬
@chobits4 大佬现在vue-cli3.0以上版本没有webpack.base.conf.js,现在要怎么改呢?
Most helpful comment
好吧,竟然没一个完整作答的,那我给答复下, 方便后入者排坑: