Skip to content

全局状态

$tState 是 TechUI 组件库通过 Vue provide/inject 机制提供的核心响应式状态树。 这是根据您提供的 $tState 对象数据,为每个属性添加了详细类型、默认值和可选项的文档。

可以便捷的导入某个元素的计算属性,如const { $gTheme } = inject("$global")

通用性与差异化

本章节为所有组件库公共章节,旨在阐述 TechUI 生态的通用架构与全局服务。

鉴于不同产品版本(如 Prime, Scifi, Admin 等)的功能定位存在差异,文档中展示的部分全局状态或函数可能仅在特定组件库中生效。

阅读时请务必留意各 API 旁标注的适用版本标记,以区分其可用性。


如下案例所示:
可用性:
Scifi
Base
Admin
Prime
代表Scifi组件库不支持此项,如未做任何标识,则是所有组件库公共的内容。

globalConfig 全局配置

用户通常可以在初始化或运行时修改这些配置。

  • platform 当前组件库类型,根据此参数判断是否需要清除本地缓存中的状态。(通常无需使用和修改)
    • 类型:String
    • 默认:参数为各个组件库的名称,如 Prime, Admin, Base, Scifi
    • 计算属性:$gPlatform
  • theme 当前主题名称
    • 类型:String
    • 默认:lightBlue
    • 计算属性:$gTheme
  • themeScheme 当前主题配色方案
    • 类型:String
    • 默认:light
    • 可选项:light, dark
    • 计算属性:$gThemeScheme
  • t3D 是否开启Tui3DPanel组件的3D变形 限体验模式 或 取得授权的情况下
    • 类型:Boolean
    • 默认:true
    • 计算属性:$gT3D
  • maskBlur 是否启用全局遮罩的背景模糊效果
    • 类型:Boolean
    • 默认:true
    • 计算属性:$gMaskBlur
  • background 背景图渲染目标
    • 类型:String
    • 默认:all
    • 可选项:all, view, root, none
    • 计算属性:$gBackground
  • menuTrigger 菜单触发方式
    • 类型:String
    • 默认:click
    • 计算属性:$gMenuTrigger
  • floaterTo 全局浮动组件的锚定目标元素选择器
    • 类型:String
    • 默认:#tuiAdpt
    • 计算属性:$gFloaterTo (另有逻辑计算属性 $optFloaterTo)
  • resizeBy 窗口尺寸监听模式
    • 类型:String
    • 默认:self
    • 可选项:self, root
    • 计算属性:$gResizeBy
  • sound 是否启用系统声音提示
    • 类型:Boolean
    • 默认:true
    • 计算属性:$gSound
  • transition 是否启用所有视图转场动画
    • 类型:Boolean
    • 默认:true
    • 计算属性:$gTransition
  • adaptive 屏幕自适应模式
    • 类型:String
    • 默认:extension
    • 可选项:fixed, flexible, stretch, extension, disabled
    • 计算属性:$gAdaptive
  • version 当前框架版本号
    • 类型:String
    • 默认:根据核心Wasm动态获取
    • 计算属性:$gVersion

globalState 运行时全局状态

这些状态由系统自动维护,不建议手动维护,仅建议监测和读取。

  • fullScreen 当前是否处于全屏模式
    • 类型:Boolean
    • 默认:false
    • 计算属性:$gFullScreen
  • maximize 当前视图是否处于最大化状态
    • 类型:Boolean
    • 默认:false
    • 计算属性:$gMaximize
  • siderCollapse 侧边栏是否处于收起状态
    • 类型:Boolean
    • 默认:false
    • 计算属性:$gSiderCollapse
  • clickTarget 最后一次点击事件的目标 DOM 元素
    • 类型:Object
    • 默认:null
    • 计算属性:$gClickTarget
  • clickCounter 全局连续点击计数器
    • 类型:Number
    • 默认:0
    • 计算属性:$gClickCounter
  • escCounter 全局 ESC 键按下计数器
    • 类型:Number
    • 默认:0
    • 计算属性:$gEscCounter
  • resizeCounter 窗口或根容器尺寸变化计数器
    • 类型:Number
    • 默认:0
    • 计算属性:$gResizeCounter (另有逻辑计算属性 $optResizeCounter)
  • portletCounter 模块数量计数
    • 类型:Number
    • 默认:0
    • 计算属性:$gPortletCounter
    • 变更说明:在V0.0.7+版本中由adaptiveConfig中迁移至此

globalParams 全局参数

对应 CSS 变量的配置值。

  • blurSaturate 模糊饱和度值
    • 类型:String
    • 默认:180%
  • blurRange 模糊半径
    • 类型:Number
    • 默认:5
  • initDur 初始化阶段的动画持续时间
    • 类型:Number
    • 默认:1

viewTrans 视图转场动画配置

控制页面切换时的动效参数。

  • curDur 当前转场动画持续时间
    • 类型:Number
    • 默认:1
  • altDur 备用转场动画持续时间
    • 类型:Number
    • 默认:1
  • curTarget 当前转场动画的作用目标
    • 类型:String
    • 默认:root
    • 可选项:adpt, root, layout
  • altTarget 备用转场动画的作用目标
    • 类型:String
    • 默认:root
  • curName 当前激活的转场动画 CSS 类名
    • 类型:String
    • 默认:vt-overlap
  • altNames 各种场景下的备用/默认动画名称集合
    • 类型:Object
    • 默认:{ theme: "vt-circle-rt", ... }

deviceInfo 设备信息

根据运行环境自动侦测。

  • type 设备类型
    • 类型:String
    • 默认:null
  • browser 浏览器名称和版本
    • 类型:String
    • 默认:null
  • resolutionH 屏幕水平分辨率
    • 类型:Number
    • 默认:null
  • resolutionV 屏幕垂直分辨率
    • 类型:Number
    • 默认:null
  • touchable 设备是否支持触摸事件
    • 类型:Boolean
    • 默认:false
  • orientation 设备屏幕方向
    • 类型:String
    • 默认:null
  • screenInvert 是否处于屏幕倒置状态
    • 类型:Boolean
    • 默认:false

controlPanel 控制面板配置

可用性:
Scifi
Base
Admin
Prime
  • visible 控制面板是否可见
    • 类型:Boolean
    • 默认:false
  • modal 控制面板是否为模态模式
    • 类型:Boolean
    • 默认:true
  • width 控制面板的宽度
    • 类型:Number
    • 默认:220
  • extension 追加项
    • 类型:Array
    • 默认:[]
  • exclusion 排除项
    • 类型:Array
    • 默认:[]

attentionConfig 消息/通知组件配置

可用性:
Scifi
Base
Admin
Prime
  • message 消息组件配置
    • 类型:Object
    • 默认:{ position: "top-center", offset: 0, ... }
    • 计算属性:$aMessage
  • notification 通知组件配置
    • 类型:Object
    • 默认:{ position: "top-right", offset: 0, ... }
    • 计算属性:$aNotification
  • toast Toast 提示配置
    • 类型:Object
    • 默认:{ visible: false, duration: 3000, ... }
    • 计算属性:$aToast
  • flash Flash 闪烁提示配置
    • 类型:Object
    • 默认:{ visible: false, appearance: "toast", ... }
    • 计算属性:$aFlash
  • dispatcher 注意力调度器配置
    • 类型:Object
    • 默认:{ visible: true, debug: false, ... }
    • 计算属性:$aDispatcher

popoverConfig 气泡弹窗配置

可用性:
Scifi
Base
Admin
Prime
  • duration 默认显示时长
    • 类型:Number
    • 默认:3000
  • maxLength 最大同时显示数量
    • 类型:Number
    • 默认:5
  • appearance 默认外观样式
    • 类型:String
    • 默认:poptip

t3dConfig 3D 特性配置

  • inited 3D 渲染器是否已初始化
    • 类型:Boolean
    • 默认:false

adaptiveConfig 自适应布局配置

  • ready 自适应系统是否已加载配置
    • 类型:Boolean
    • 默认:false
    • 计算属性:$adptReady
  • inited 自适应系统是否已初始化
    • 类型:Boolean
    • 默认:false
    • 计算属性:$adptInited
  • resizeCounter 自适应触发的尺寸变化计数
    • 类型:Number
    • 默认:0
    • 计算属性:$aResizeCounter
  • dragTip 是否显示拖拽提示
    • 类型:Boolean
    • 默认:true

backgroundConfig 背景配置

  • graphicType 当前背景图形的类型
    • 类型:String
    • 默认:SvgPattern
  • SvgPattern SvgPattern 类型的具体配置对象
    • 类型:Object
    • 默认:{}

spinnerConfig 加载动画配置

  • full 全屏加载时的动画配置
    • 类型:Object
    • 默认:{ name: "blocksA", size: 100 }
  • area 局部区域加载时的动画配置
    • 类型:Object
    • 默认:{ name: "pointA", size: 40 }

ADMIN 后台管理系统模块状态

可用性:
Scifi
Base
Admin
Prime

仅在 isActAdminFeatures 为真时激活。

  • routerInited 动态路由是否已初始化
    • 类型:Boolean
    • 默认:false
    • 计算属性:$ARouterInited
  • maximize 当前 Tab 视图是否最大化
    • 类型:Boolean
    • 默认:false
  • siderCollapse 侧边栏是否折叠
    • 类型:Boolean
    • 默认:false
  • tabs 当前打开的 Tab 页签列表
    • 类型:Array
    • 默认:[]
    • 计算属性:$ATabs
  • keepAlive 当前需要 KeepAlive 缓存的路由名称列表
    • 类型:Array
    • 默认:['home']
    • 计算属性:$AKeepAlive
  • userInfoSto 用户信息存储位置
    • 类型:String
    • 默认:session
    • 计算属性:$AUserInfoSto
  • userInfo 用户基本信息
    • 类型:Object
    • 默认:{ token: null, id: null, ... }
    • 计算属性:$AUserInfo
  • menu 用户的菜单树数据
    • 类型:Array
    • 默认:[]
    • 计算属性:$AMenu
  • permission 用户的权限列表数据
    • 类型:Array
    • 默认:[]
    • 计算属性:$APermission
  • dict 全局字典数据
    • 类型:Object
    • 默认:{}
    • 计算属性:$ADict
  • componentRegister 组件注册表
    • 类型:Object
    • 默认:{}
    • 计算属性:$ARouterRegister

快速上手

main.js 配置了调试模式的情况下,即可在调试工具的控制台中,输入 tuiServiceState() 来快速查看当前的所有全局服务的状态,从而可以通过和文档对比,较为快速的掌握全局状态。

关于调试模式的开启,可以查看 开始-调试模式 章节。