遮罩

TechUI 的遮罩组件 (TuiMask) 是构建模态框、抽屉以及全屏覆盖层的基础元素。它主要用于阻挡用户与底层界面的交互，并提供视觉上的深度聚焦（通常配合背景模糊或变暗效果）。

与 Loading 组件类似，Mask 组件同时也支持 函数式 和 组件式 两种调用方式，以适应不同的开发场景。

全局方法调用

在业务逻辑中，如果您需要临时创建一个遮罩（例如用于自定义的弹窗逻辑），推荐使用全局方法 $tMask。

javascript

import { inject } from 'vue';

const { $tMask, $tMaskClose } = inject('$global');

const showMask = () => {
  $tMask({
    visible: true,
    appendTo: "#app",      // 指定挂载节点
    position: "fixed",     // 定位方式
    zIndex: 2000,          // 自定义层级
    
    // 点击遮罩的回调
    click: () => {
      console.log("Mask clicked!");
      $tMaskClose(); // 关闭遮罩
    }
  });
};

组件方式调用

在 Vue 模板中，通常配合 <transition> 或业务组件（如侧边栏、自定义面板）使用。

html

<template>
  <div class="custom-panel-wrap" style="position: relative; height: 300px;">
    
    <div class="content">...</div>

    <TuiMask 
      :visible="showMask" 
      position="absolute"
      :modal="true"
      @click="handleMaskClick"
    />
  </div>
</template>

API 参考

TuiMask 属性 / $tMask 参数

属性名	类型	默认值	说明
visible	Boolean	`false`	控制遮罩的显示与隐藏。
appendTo	String / Object	`null`	指定挂载的目标 DOM 节点（选择器字符串或 DOM 对象）。通常用于将遮罩提升到 `body` 或指定容器层级。
position	String	`null`	定位方式。可选值：`'fixed'` (相对于视口), `'absolute'` (相对于父容器)。
modal	Boolean	`true`	是否启用模态背景（即显示变暗或模糊的背景色）。若为 `false`，则遮罩透明但仍拦截点击。
zIndex	Number	-	自定义层级 (z-index)。
click	Function	-	当用户点击遮罩层时触发的回调函数。
destroy	Function	-	(内部使用) 销毁组件实例的回调。
dynamicRender	Boolean	`false`	(内部使用) 标记是否为动态渲染模式。

全局方法

$tMask(options): 创建并显示遮罩实例。options 参数同上方属性表。
$tMaskClose(): 关闭并销毁当前由全局方法创建的遮罩实例。

最佳实践

定位策略：
- 如果您需要全屏遮罩（阻断整个页面），请使用 position: 'fixed' 并挂载到 #tuiRoot 或 #app。
- 如果您只需要遮挡某个卡片或区域，请使用 position: 'absolute'，并确保父容器设置了 position: relative。
交互闭环：
- 在使用 $tMask 时，务必在 click 回调或业务流程结束时调用 $tMaskClose()，否则遮罩将一直存在。
配合动画：
- TuiMask 内部已集成了淡入淡出过渡动画，无需额外包裹 <transition> 组件。

遮罩 ​

全局方法调用 ​

组件方式调用 ​

API 参考 ​

TuiMask 属性 / $tMask 参数 ​

全局方法 ​