Skip to content
On this page

组件库文档 tmui.design

应用节点 App

这是所有页面的根节点,请务必在创建页面是把它作为页面的根节点。以后可扩展性非常强。


应用节点 App

页面示例模板
js
<template>
    <tm-app ref="app">
        <!-- 这里是你的页面代码。 -->
    </tm-app>
</template>

<script lang="ts" setup>
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
//你的代码...
</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

关于tabBar

tabarv3.0.75+开始已经删除该属性。转而读取你的项目 目录下的pages.json的配置,如果未配置将使用框架自带的配置颜色。因为该属性只对原生的tabBar起到切换主题作用。 因此如果你使用自带的tabBar组件将不受影响。

参数名类型默认值描述
themeStringgrey-5当前应用主题(未开放)
bgImgStringhttps://picsum.photos/750/1448APP应用的背景图,nvue不支持
colorStringgrey-4应用的背景颜色
darkColorv3.0.74+[String]#050505暗黑时的背景色值,只能是颜色值。
blurBoolean, Stringfalse模糊背景(未开放)
navbarObject{background: '#ffffff',fontColor: '#000000'}标题导航配色

🌹 事件

🌽 slot插槽

默认default menu 插槽,用来显示覆盖在页面左边弹出层的菜单插槽。具体见demo前页示例。

🥗 ref方法

方法名参数返回值描述
setThemecolorName: string 主题名称设定主题
setDarkdark ? : boolean 是否暗黑设定暗黑
ts
import {getCurrentInstance} from "vue"
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
const {proxy} = getCurrentInstance();
//设置红色主题
proxy.$refs.app.setTheme("red")
//设置当前为暗黑效果
proxy.$refs.app.setDark(true)