## 水印

### 基本用法

:::demo

```html
<template>
  <div id="watermark-md" style="position: relative; height: 500px;">
    <klzz-watermark
      ref="watermark"
      :undeletable="undeletable"
      :color="color"
      @change="change"
    ></klzz-watermark>
    <el-form>
      <el-form-item label="水印颜色">
        <el-color-picker v-model="color" @change="renderWatermark" />
      </el-form-item>
      <el-form-item label="全局水印">
        <el-checkbox v-model="global" @change="globalChange" />
      </el-form-item>
      <el-form-item label="不可删除水印">
        <el-checkbox v-model="undeletable" />
      </el-form-item>
      <el-button @click="del">删除水印</el-button>
    </el-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        global: false,
        undeletable: true,
        containerId: 'watermark-md',
        color: 'rgba(184, 184, 184, 0.5)',
      };
    },
    methods: {
      globalChange(v) {
        this.containerId = v ? '' : 'watermark-md';
        this.renderWatermark();
      },
      renderWatermark() {
        this.$nextTick(() => {
          this.$refs.watermark.init();
        });
      },
      del() {
        const watermark = document.getElementById('watermark');
        watermark && watermark.parentNode.removeChild(watermark);
      },
      change(msg) {
        this.$message.warning(msg);
      },
    },
  };
</script>
```

:::

### Attributes

| 参数        | 说明                                           | 类型    | 可选值 | 默认值                   | 必填 |
| ----------- | ---------------------------------------------- | ------- | ------ | ------------------------ | ---- |
| containerId | 水印容器 id（默认将水印放到 document.body 下） | string  | —      |                          | 否   |
| canvasId    | 水印元素 id                                    | string  | —      | watermark                | 否   |
| text        | 水印文本                                       | string  | —      | 禁止外传                 | 否   |
| fontSize    | 字体大小                                       | number  | —      | 20                       | 否   |
| color       | 字体颜色                                       | string  | —      | rgba(184, 184, 184, 0.1) | 否   |
| rotate      | 文字旋转角度                                   | number  | —      | 30                       | 否   |
| zIndex      | DOM 层级                                       | number  | —      | 9999                     | 否   |
| undeletable | 不可删除水印（观察到删除操作会刷新页面）       | boolean | —      | true                     | 否   |

### Event

| 事件名称 | 说明                    | 回调参数              |
| -------- | ----------------------- | --------------------- |
| change   | 水印 DOM 元素变化后触发 | Function(msg: string) |