Mask 遮罩层

模态遮罩层组件，用于阻止用户交互，支持自定义背景颜色和过渡动画。

基础用法

最简单的用法，使用默认背景颜色。

<template>
  <u-button @click="visible = true" color="primary">打开遮罩</u-button>
  <div class="mask-container">
    <u-mask v-model="visible">
      <div class="mask-center-content">
        <u-card>
          <u-card-title>遮罩内容</u-card-title>
          <u-card-text>
            <p>这是一个带有内容的遮罩层。</p>
          </u-card-text>
          <div class="mask-actions">
            <u-button @click="visible = false" color="primary">关闭</u-button>
          </div>
        </u-card>
      </div>
    </u-mask>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  const visible = ref(false);
</script>

自定义背景颜色

通过 bg 属性设置自定义背景颜色。

<template>
  <u-button @click="visible = true" color="success">打开深色遮罩</u-button>
  <div class="mask-container">
    <u-mask v-model="visible" bg="rgba(0, 0, 0, 0.85)">
      <div class="mask-center-content">
        <u-card>
          <u-card-title>深色背景</u-card-title>
          <u-card-text>
            <p>这个遮罩有更深的背景色。</p>
          </u-card-text>
          <div class="mask-actions">
            <u-button @click="visible = false" color="primary">关闭</u-button>
          </div>
        </u-card>
      </div>
    </u-mask>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  const visible = ref(false);
</script>

禁止点击遮罩关闭

通过 closeOnClick 属性设置点击遮罩层时是否关闭。

<template>
  <u-button @click="visible = true" color="warning">禁止点击关闭</u-button>
  <div class="mask-container">
    <u-mask v-model="visible" :close-on-click="false">
      <div class="mask-center-content">
        <u-card>
          <u-card-title>禁止点击外部关闭</u-card-title>
          <u-card-text>
            <p>点击遮罩区域不会关闭。</p>
          </u-card-text>
          <div class="mask-actions">
            <u-button @click="visible = false" color="primary">关闭</u-button>
          </div>
        </u-card>
      </div>
    </u-mask>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  const visible = ref(false);
</script>

配合 Dialog 使用

遮罩层通常与对话框组件配合使用。

<template>
  <u-button @click="visible = true" color="error">打开对话框</u-button>
  <div class="mask-container">
    <u-mask v-model="visible">
      <div class="mask-center-content">
        <u-card>
          <u-card-title>用户设置</u-card-title>
          <u-card-text>
            <p>这是一个配合遮罩层使用的对话框示例。</p>
          </u-card-text>
          <div class="mask-actions">
            <u-button @click="visible = false">取消</u-button>
            <u-button @click="visible = false" color="primary">保存</u-button>
          </div>
        </u-card>
      </div>
    </u-mask>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  const visible = ref(false);
</script>

UMask API

属性	说明	类型	默认值
modelValue	是否显示	boolean	false
closeOnClick	是否点击遮罩关闭	boolean	true
bg	自定义背景颜色	string	var(--u-mask-bg)

UMask 插槽

插槽名	说明
default	遮罩内显示的内容