美文网首页
Vux项目使用记录

Vux项目使用记录

作者: 四月天__ | 来源:发表于2018-08-17 11:21 被阅读59次

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 image.png

相关文章

网友评论

      本文标题:Vux项目使用记录

      本文链接:https://www.haomeiwen.com/subject/bfyzbftx.html