关于uviewui修改主题及在uniapp中的应用

在uview使用过程中遇到很多不方便的地方,记录下来

修改主题颜色

给UI框架换个主题色基础方法是覆盖原有色(但这个方法比较笨,处理起来也不干净利索),所以换个思路改变基础色值变量,步骤主要分为2部分:

1.修改样式中的颜色变量(一般大家都清楚);
2.修改由js 生成的dom的样式变量;

那么在uviewui的基础上具体操作如下:

/*
# 1.修改css的基础变量:
# 官方说明中:在项目src目录的uni.scss中引入 @import 'uview-ui/theme.scss'; 。
# 修改主题可以取消上面步骤的引入,直接到node_modules中找到 uview-ui/theme.scss 文件将内容复制到 uni.scss 中,这样就可以直接修改颜色变量了。

#2.修改框架由 js 操作而生成的样式
# 官方文档中:在项目src目录中的main.js中引入了uview 的js主库
# 那么我们可以直接在引入主库后通过uni.$u.setConfig({})方法修改js库中的颜色变量
*/
// main.js 
import uView from "uview-ui";
Vue.use(uView);
// 上面是引入 uview 主库的2句代码

uni.$u.setConfig({
	color: {	// color这里的目的是修改基础颜色但测试中暂未知效果,这里先列出来
	    'u-primary': '#ff8500',
	    ...
	},
	props:{
		tabs: {
		    lineColor: '#19be6b'	// 示例修改tabs 的激活颜色
		}
	}
})

// 那么哪些js变量支持修改呢? 下面列出一下自己使用过的可用的,欢迎留言补充
uni.$u.props.tabs.lineColor = '#112200' //示例修改tabs 的激活颜色, 效果同上方式 

你可能感兴趣的:(uni-app,vue.js,前端)