主题库函数方法介绍
本组件库已全局封装了主题方法类库主要包含以下几个方法
color主题说明
请注意:
从1.2.24开始主题并不是全部包含在样式库中而是在位于tm-vuetify->scss->theme.css中,打开该文件 如果想要使用哪些主题就把注释去掉即可。主题包在tm-vuetify->scss->theme目录下。
如果想要自己生成主题包:打开生成工具
获取当前主题getTheme
this.$tm.theme.getTheme(); //获取当前主题数据
/*返回
{
color:当前使用的主题色,没有使用为null或者'',
black:true/false当前模式,暗黑或者亮色
}
*/
1
2
3
4
5
6
7
2
3
4
5
6
7
设置当前主题setTheme 关于color主题名称介绍请前往主题库中查看
this.$tm.theme.setTheme(color); //color为主题色名称,如果不提供,默认为primary
1
清除设置的主题,并恢复默认布局clear
this.$tm.theme.clear(); //清除当前主题,恢复你默认布局使用的主题色。
1
如何阻止 组件 跟随主题色的变化 有时我们不需要 一些特定的组件跟随主题的变化而变化,那么只需要在组件上如下设置:
下面以tm-button为例
//在组件上配置:fllowTheme="false" 即可阻止组件跟随主题变化。
<tm-button :fllowTheme="false"></tm-button>
1
2
2
如何在页面上使用使用主题色
下面以view为例
<view :class="[$tm.vx.state().tmVuetify.color]" class="pa-32">
默认主题是空的。只你设置了才会有。
</view>
1
2
3
4
2
3
4