ant design vue previewMask

### 如何在 Ant Design Vue 中使用 `previewMask`

`previewMask` 是用于图片预览组件中的属性之一，在 Ant Design Vue 组件库中，通常与 `<a-image>` 或者其他支持该特性的组件一起工作。当设置此参数时，可以控制是否显示遮罩层以及其样式。

#### 使用方法

为了启用并自定义 `previewMask` 属性，可以在引入相应组件之后按照如下方式配置：

<template>
  <div id="app">
    <!-- 图片展示区域 -->
    <a-image :src="imageSrc" @click="showPreview"/>
    
    <!-- 预览弹窗 -->
    <a-modal v-model:visible="previewVisible" footer=null>
      <img alt="example" style="width: 100%" :src="imageSrc" />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const imageSrc = '/path/to/image.jpg';
let previewVisible = ref(false);

function showPreview() {
  previewVisible.value = true;
}
</script>

<style scoped>
/* 自定义遮罩层样式 */
.ant-modal-mask {
  background-color: rgba(0, 0, 0, .7);
}

/* 如果需要进一步调整模态框内的内容布局或其他样式可在此处添加CSS规则 */
</style>

上述代码片段展示了如何通过点击一张图片来触发全屏预览效果，并且可以通过修改 `.ant-modal-mask` 类来自定义遮罩的颜色和透明度[^1]。

需要注意的是，如果想要更灵活地处理不同场景下的需求，则可能还需要考虑将 `previewMask` 结合到具体的业务逻辑当中去实现更加复杂的功能[^2]。

对于最新版的 Ant Design Vue (v4.x)，确保项目依赖项是最新的版本以便获得最佳兼容性和性能表现[^3]。