vue ant 写一段代码 给一个modal框加水印

好的，以下是一段使用 Vue 和 Ant Design 组件库编写的给 Modal 对话框添加水印的代码示例：

<template>
  <div>
    <a-button type="primary" @click="showModal">打开 Modal</a-button>
    <a-modal
      title="这是一个 Modal"
      v-model="visible"
      :bodyStyle="{ position: 'relative' }"
      :afterClose="resetModal"
    >
      <p>这是 Modal 的内容</p>
      <div class="watermark" v-show="visible">{{ watermarkText }}</div>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      watermarkText: '这是水印',
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    resetModal() {
      this.visible = false;
    },
  },
};
</script>

<style>
.watermark {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
</style>

在这个示例中，我们使用了 Ant Design 的 Modal 组件，用于展示对话框。为了在对话框中添加水印，我们给 Modal 组件的 bodyStyle 属性设置了 `position: relative`，并在对话框中添加了一个绝对定位的水印元素。需要注意的是，我们给水印元素设置了 `pointer-events: none`，以便鼠标事件能够穿透到下面的对话框内容。当对话框关闭时，我们需要手动将 `visible` 属性设置为 false，以便下次打开对话框时水印能够重新显示。