主题库函数方法介绍

本组件库已全局封装了主题方法类库主要包含以下几个方法

color主题说明

请注意:
从1.2.24开始主题并不是全部包含在样式库中而是在位于tm-vuetify->scss->theme.css中,打开该文件 如果想要使用哪些主题就把注释去掉即可。主题包在tm-vuetify->scss->theme目录下。
如果想要自己生成主题包:打开生成工具open in new window

获取当前主题getTheme

this.$tm.theme.getTheme(); //获取当前主题数据
/*返回
{
	color:当前使用的主题色,没有使用为null或者'',
	black:true/false当前模式,暗黑或者亮色
}
*/
1
2
3
4
5
6
7

设置当前主题setTheme 关于color主题名称介绍请前往主题库中查看open in new window

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

如何在页面上使用使用主题色

下面以view为例

<view :class="[$tm.vx.state().tmVuetify.color]" class="pa-32">
默认主题是空的。只你设置了才会有。
</view>

1
2
3
4
tmzdy 于 2022/12/7 编辑 报错? | 评论?