Vux: TabbarItem标题下方的文字激活时的颜色为绿色,能否提供props供开发者自定义?

Created on 31 Jul 2017  ·  7Comments  ·  Source: airyland/vux


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

<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>

componentabbar

Most helpful comment

好吧,竟然没一个完整作答的,那我给答复下, 方便后入者排坑:

  • 打开文件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系统中), 仅第一次需要, 以后不需要该重启操作

All 7 comments

自己样式去覆盖

  1. 用 less-theme 插件来覆盖变量 @tabbar-text-active-color
  2. 确定你有按照文档引入 reset.less? 如果有,decoration 已经置为 none 不会有下划线。

好吧,竟然没一个完整作答的,那我给答复下, 方便后入者排坑:

  • 打开文件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,现在要怎么改呢?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

varHarrie picture varHarrie  ·  4Comments

525729985 picture 525729985  ·  4Comments

hezhiwen940420 picture hezhiwen940420  ·  4Comments

iqiuye picture iqiuye  ·  4Comments

LS1231 picture LS1231  ·  3Comments