watermark

水印

• 可在任何场合开启 修改 关闭水印

示例 1-在全局初始化水印（页面刷新会保留水印）

import { createApp } from "vue";
import App from "./App.vue";
import { watermark } from "leisure-lib";

const app = createApp(App);
app.mount("#app");
watermark.show("水印文字");

示例 2-在页面中使用

开启水印后可修改水印

<template>
  <el-row :gutter="18">
    <el-col :span="6">
      <Button @click="handleShow" type="primary">开启水印</Button>
    </el-col>
    <el-col :span="12">
      <el-input v-model="markText" placeholder="请输入"></el-input>
    </el-col>
    <el-col :span="6">
      <Button :disabled="!watermarkInstance" @click="handleModify">
        修改水印
      </Button>
    </el-col>
  </el-row>
  <el-divider></el-divider>
  <Button @click="handleClose" type="danger">关闭水印</Button>
</template>

<script lang="ts" setup>
import { Button, watermark } from "leisure-lib";
import { ref } from "vue";
const watermarkInstance = ref(null);
const markText = ref("i am wm");
const handleShow = () => {
  watermarkInstance.value = watermark.show("from: leisure-lib");
};

const handleClose = () => {
  watermarkInstance.value.close();
};
const handleModify = () => {
  watermarkInstance.value.change(markText.value);
};
</script>

<style></style>

类型接口 type/inteface

interface WatermarkI {
  create: (str: string) => Watermark;
  close: () => void;
  change: (str: string) => Watermark;
}

class Watermark implements WatermarkI {}

方法

方法名	参数	返回值	说明
show	text:string	Watermark	新建一个水印实例
close	无	无	销毁当前水印实例
change	text:string	Watermark	修改当前水印的文字

插槽