1、修改主题颜色:
可以通过配置vuxLoader
配置加载主题配置的文件,
打开文件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系统中), 仅第一次需要,
以后不需要该重启操作
https://github.com/airyland/vux/issues/1777
Vux允许我们定制自己项目的主题样式,所有可定制的样式变量可查阅: https://github.com/airyland/vux/blob/v2/src/styles/variable.less
在开发中如果某个组件的字体大小、间距、字体颜色等样式不符合我们设计图的样式,我们可以通过调试模式查看对应需要修改的元素的样式,然后在上面地址里去检索对应的less样式进行覆盖修改就可以啦。
2、<group> ...</<group>
组件的使用
group
组件效果和原生的tableView
非常类似,在使用的时候经常会遇到在组件头部放一些内容,由于group
组件的默认插槽就是子组件即<cell>... </cell>
的内容,但是group组件也给了一个插槽名字让我们自定义头部内容。
如下面效果:
image.png image.png
网友评论