加水印，用户管理左侧显示

shuishen

2023-12-18 eb902ba6bed2cb0cd8cb9ecc8633c56b2e16b739

加水印，用户管理左侧显示

 src/App.vue

@@ -5,25 +5,31 @@
</template>

<script>
import Watermark from "./warterMarkVUE"

export default {
  name: "app",
  data() {
    return {};
        return {}
  },
  watch: {},
  created() {

        Watermark.set("饶城格格")
    },
    mounted () {
  },
  methods: {},
  computed: {}
};
}
</script>

<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.avue--detail .el-col{
  margin-bottom: 0;
}

 src/views/system/user.vue

@@ -1,6 +1,6 @@
<template>
  <el-row>
    <!-- <el-col :span="5">
        <el-col :span="5">
      <div class="box">
        <el-scrollbar>
          <basic-container>
@@ -8,48 +8,22 @@
          </basic-container>
        </el-scrollbar>
      </div>
    </el-col> -->
    <el-col :span="24">
        </el-col>
        <el-col :span="19">
      <basic-container>
        <avue-crud :option="option"
                   :search.sync="search"
                   :table-loading="loading"
                   :data="data"
                   ref="crud"
                   v-model="form"
                   :permission="permissionList"
                   @row-del="rowDel"
                   @row-update="rowUpdate"
                   @row-save="rowSave"
                   :before-open="beforeOpen"
                   :page.sync="page"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                   @on-load="onLoad">
                <avue-crud :option="option" :search.sync="search" :table-loading="loading" :data="data" ref="crud"
                    v-model="form" :permission="permissionList" @row-del="rowDel" @row-update="rowUpdate"
                    @row-save="rowSave" :before-open="beforeOpen" :page.sync="page" @search-change="searchChange"
                    @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
                    @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
          <template slot="menuLeft">
            <el-button type="danger"
                       size="small"
                       plain
                       icon="el-icon-delete"
                       v-if="permission.user_delete"
                        <el-button type="danger" size="small" plain icon="el-icon-delete" v-if="permission.user_delete"
                       @click="handleDelete">删 除
            </el-button>
            <el-button type="info"
                       size="small"
                       plain
                       v-if="permission.user_role"
                       icon="el-icon-user"
                        <el-button type="info" size="small" plain v-if="permission.user_role" icon="el-icon-user"
                       @click="handleGrant">角色配置
            </el-button>
            <el-button type="info"
                       size="small"
                       plain
                       v-if="permission.user_reset"
                       icon="el-icon-refresh"
                        <el-button type="info" size="small" plain v-if="permission.user_reset" icon="el-icon-refresh"
                       @click="handleReset">密码重置
            </el-button>
            <!-- <el-button type="info"
@@ -59,70 +33,41 @@
                       icon="el-icon-setting"
                       @click="handlePlatform">平台配置
            </el-button> -->
            <el-button type="info"
                       size="small"
                       plain
                       v-if="userInfo.role_name.includes('admin')"
                       icon="el-icon-coordinate"
                       @click="handleLock">账号解封
                        <el-button type="info" size="small" plain v-if="userInfo.role_name.includes('admin')"
                            icon="el-icon-coordinate" @click="handleLock">账号解封
            </el-button>
            <el-button type="success"
                       size="small"
                       plain
                       v-if="userInfo.role_name.includes('admin')"
                       icon="el-icon-upload2"
                       @click="handleImport">导入
                        <el-button type="success" size="small" plain v-if="userInfo.role_name.includes('admin')"
                            icon="el-icon-upload2" @click="handleImport">导入
            </el-button>
            <el-button type="warning"
                       size="small"
                       plain
                       v-if="userInfo.role_name.includes('admin')"
                       icon="el-icon-download"
                       @click="handleExport">导出
                        <el-button type="warning" size="small" plain v-if="userInfo.role_name.includes('admin')"
                            icon="el-icon-download" @click="handleExport">导出
            </el-button>
          </template>
          <template slot-scope="{row}"
                    slot="tenantName">
                    <template slot-scope="{row}" slot="tenantName">
            <el-tag>{{row.tenantName}}</el-tag>
          </template>
          <template slot-scope="{row}"
                    slot="roleName">
                    <template slot-scope="{row}" slot="roleName">
            <el-tag>{{row.roleName}}</el-tag>
          </template>
          <template slot-scope="{row}"
                    slot="deptName">
                    <template slot-scope="{row}" slot="deptName">
            <el-tag>{{row.deptName}}</el-tag>
          </template>
          <template slot-scope="{row}"
                    slot="userTypeName">
                    <template slot-scope="{row}" slot="userTypeName">
            <el-tag>{{row.userTypeName}}</el-tag>
          </template>
        </avue-crud>
        <el-dialog title="用户角色配置"
                   append-to-body
                   :visible.sync="roleBox"
                   width="345px">
                <el-dialog title="用户角色配置" append-to-body :visible.sync="roleBox" width="345px">

          <el-tree :data="roleGrantList"
                   show-checkbox
                   check-strictly
                   default-expand-all
                   node-key="id"
                   ref="treeRole"
                   :default-checked-keys="roleTreeObj"
                   :props="props">
                    <el-tree :data="roleGrantList" show-checkbox check-strictly default-expand-all node-key="id"
                        ref="treeRole" :default-checked-keys="roleTreeObj" :props="props">
          </el-tree>

          <span slot="footer" class="dialog-footer">
            <el-button @click="roleBox = false">取 消</el-button>
            <el-button type="primary"
                       @click="submitRole">确 定</el-button>
                        <el-button type="primary" @click="submitRole">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog title="用户数据导入"
                   append-to-body
                   :visible.sync="excelBox"
                   width="555px">
                <el-dialog title="用户数据导入" append-to-body :visible.sync="excelBox" width="555px">
          <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
            <template slot="excelTemplate">
              <el-button type="primary" @click="handleTemplate">
@@ -176,38 +121,38 @@
    add,
    grant,
    resetPassword, unlock
  } from "@/api/system/user";
  import {exportBlob} from "@/api/common";
  import {getDeptTree, getDeptLazyTree} from "@/api/system/dept";
  import {getRoleTree} from "@/api/system/role";
  import {getPostList} from "@/api/system/post";
  import {mapGetters} from "vuex";
  import website from '@/config/website';
  import {getToken} from '@/util/auth';
  import {downloadXls} from "@/util/util";
  import {dateNow} from "@/util/date";
  import NProgress from 'nprogress';
  import 'nprogress/nprogress.css';
  import func from "@/util/func";
} from "@/api/system/user"
import { exportBlob } from "@/api/common"
import { getDeptTree, getDeptLazyTree } from "@/api/system/dept"
import { getRoleTree } from "@/api/system/role"
import { getPostList } from "@/api/system/post"
import { mapGetters } from "vuex"
import website from '@/config/website'
import { getToken } from '@/util/auth'
import { downloadXls } from "@/util/util"
import { dateNow } from "@/util/date"
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import func from "@/util/func"

  export default {
    data() {
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
                callback(new Error('请输入密码'))
        } else {
          callback();
                callback()
        }
      };
        }
      const validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
                callback(new Error('请再次输入密码'))
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
                callback(new Error('两次输入密码不一致!'))
        } else {
          callback();
                callback()
        }
      };
        }
      return {
        form: {},
        search:{},
@@ -245,7 +190,7 @@
          nodeKey: 'id',
          lazy: true,
          treeLoad: function (node, resolve) {
            const parentId = (node.level === 0) ? 0 : node.data.id;
                    const parentId = (node.level === 0) ? 0 : node.data.id
            getDeptLazyTree(parentId).then(res => {
              resolve(res.data.data.map(item => {
                return {
@@ -253,7 +198,7 @@
                  leaf: !item.hasChildren
                }
              }))
            });
                    })
          },
          addBtn: false,
          menu: false,
@@ -302,12 +247,12 @@
              slot: true,
              display: false
            },
            // {
            //   label: "所属部门",
            //   prop: "deptName",
            //   slot: true,
            //   display: false
            // },
                    {
                        label: "所属部门",
                        prop: "deptName",
                        slot: true,
                        display: false
                    },
            // {
            //   label: "用户平台",
            //   prop: "userTypeName",
@@ -516,6 +461,7 @@
                  },
                  checkStrictly: true,
                  slot: true,
                                span: 12,
                  rules: [{
                    required: true,
                    message: "请选择所属部门",
@@ -666,18 +612,18 @@
            }
          ]
        }
      };
        }
    },
    watch: {
      'form.tenantId'() {
        if (this.form.tenantId !== '' && this.initFlag) {
          this.initData(this.form.tenantId);
                this.initData(this.form.tenantId)
        }
      },
      'excelForm.isCovered'() {
        if (this.excelForm.isCovered !== '') {
          const column = this.findObject(this.excelOption.column, "excelFile");
          column.action = `/api/blade-system/user/import-user?isCovered=${this.excelForm.isCovered}`;
                const column = this.findObject(this.excelOption.column, "excelFile")
                column.action = `/api/blade-system/user/import-user?isCovered=${this.excelForm.isCovered}`
        }
      }
    },
@@ -689,7 +635,7 @@
          viewBtn: this.vaildData(this.permission.user_view, false),
          delBtn: this.vaildData(this.permission.user_delete, false),
          editBtn: this.vaildData(this.permission.user_edit, false)
        };
            }
      },
      platformPermissionList() {
        return {
@@ -697,93 +643,93 @@
          viewBtn: false,
          delBtn: false,
          editBtn: this.vaildData(this.permission.user_edit, false)
        };
            }
      },
      ids() {
        let ids = [];
            let ids = []
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
                ids.push(ele.id)
            })
            return ids.join(",")
      },
    },
    mounted() {
      // 非租户模式默认加载管理组数据
      if (!website.tenantMode) {
        this.initData(website.tenantId);
            this.initData(website.tenantId)
      }
    },
    created(){
      this.initData(website.tenantId);
        this.initData(website.tenantId)
    },
    methods: {
      nodeClick(data) {
        this.treeDeptId = data.id;
        this.page.currentPage = 1;
        this.onLoad(this.page);
            this.treeDeptId = data.id
            this.page.currentPage = 1
            this.onLoad(this.page)
      },
      initData(tenantId) {
        getRoleTree(tenantId).then(res => {
          const column = this.findObject(this.option.group, "roleId");
          column.dicData = res.data.data;
        });
                const column = this.findObject(this.option.group, "roleId")
                column.dicData = res.data.data
            })
        getDeptTree(tenantId).then(res => {
          const column = this.findObject(this.option.group, "deptId");
          column.dicData = res.data.data;
        });
                const column = this.findObject(this.option.group, "deptId")
                column.dicData = res.data.data
            })
        // getPostList(tenantId).then(res => {
        //   const column = this.findObject(this.option.group, "postId");
        //   column.dicData = res.data.data;
        // });
      },
      submitRole() {
        const roleList = this.$refs.treeRole.getCheckedKeys().join(",");
            const roleList = this.$refs.treeRole.getCheckedKeys().join(",")
        grant(this.ids, roleList).then(() => {
          this.roleBox = false;
                this.roleBox = false
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.onLoad(this.page);
        });
                })
                this.onLoad(this.page)
            })
      },
      rowSave(row, done, loading) {
        row['tenantId'] = "000000"
        row['userType'] = 1
        row.deptId = func.join(row.deptId);
        row.roleId = func.join(row.roleId);
            row.deptId = func.join(row.deptId)
            row.roleId = func.join(row.roleId)
        // row.postId = func.join(row.postId);
        add(row).then(() => {
          this.initFlag = false;
          this.onLoad(this.page);
                this.initFlag = false
                this.onLoad(this.page)
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
                })
                done()
        }, error => {
          window.console.log(error);
          loading();
        });
                window.console.log(error)
                loading()
            })
      },
      rowUpdate(row, index, done, loading) {
        row['tenantId'] = "000000"
        row['userType'] = 1
        row.deptId = func.join(row.deptId);
        row.roleId = func.join(row.roleId);
            row.deptId = func.join(row.deptId)
            row.roleId = func.join(row.roleId)
        // row.postId = func.join(row.postId);
        update(row).then(() => {
          this.initFlag = false;
          this.onLoad(this.page);
                this.initFlag = false
                this.onLoad(this.page)
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
                })
                done()
        }, error => {
          window.console.log(error);
          loading();
        });
                window.console.log(error)
                loading()
            })
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
@@ -792,38 +738,38 @@
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
                    return remove(row.id)
          })
          .then(() => {
            this.onLoad(this.page);
                    this.onLoad(this.page)
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
                    })
                })
      },
      searchReset() {
        this.query = {};
        this.treeDeptId = '';
        this.onLoad(this.page);
            this.query = {}
            this.treeDeptId = ''
            this.onLoad(this.page)
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
      },
      selectionChange(list) {
        this.selectionList = list;
            this.selectionList = list
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
            this.selectionList = []
            this.$refs.crud.toggleSelection()
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
                this.$message.warning("请选择至少一条数据")
                return
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
@@ -831,21 +777,21 @@
          type: "warning"
        })
          .then(() => {
            return remove(this.ids);
                    return remove(this.ids)
          })
          .then(() => {
            this.onLoad(this.page);
                    this.onLoad(this.page)
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
                    })
                    this.$refs.crud.toggleSelection()
                })
      },
      handleReset() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
                this.$message.warning("请选择至少一条数据")
                return
        }
        this.$confirm("确定将选择账号密码重置为123456?", {
          confirmButtonText: "确定",
@@ -853,37 +799,37 @@
          type: "warning"
        })
          .then(() => {
            return resetPassword(this.ids);
                    return resetPassword(this.ids)
          })
          .then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
                    })
                    this.$refs.crud.toggleSelection()
                })
      },
      handleGrant() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
                this.$message.warning("请选择至少一条数据")
                return
        }
        this.roleTreeObj = [];
            this.roleTreeObj = []
        if (this.selectionList.length === 1) {
          this.roleTreeObj = this.selectionList[0].roleId.split(",");
                this.roleTreeObj = this.selectionList[0].roleId.split(",")
        }
        getRoleTree().then(res => {
          this.roleGrantList = res.data.data;
          this.roleBox = true;
        });
                this.roleGrantList = res.data.data
                this.roleBox = true
            })
      },
      handlePlatform() {
        this.platformBox = true;
            this.platformBox = true
      },
      handleLock() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
                this.$message.warning("请选择至少一条数据")
                return
        }
        this.$confirm("确定将选择账号解封？", {
          confirmButtonText: "确定",
@@ -891,140 +837,140 @@
          type: "warning"
        })
          .then(() => {
            return unlock(this.ids);
                    return unlock(this.ids)
          })
          .then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
                    })
                })
      },
      handleImport() {
        this.excelBox = true;
            this.excelBox = true
      },
      uploadAfter(res, done, loading, column) {
        window.console.log(column);
        this.excelBox = false;
        this.refreshChange();
        done();
            window.console.log(column)
            this.excelBox = false
            this.refreshChange()
            done()
      },
      handleExport() {
        const account = func.toStr(this.search.account);
        const realName = func.toStr(this.search.realName);
            const account = func.toStr(this.search.account)
            const realName = func.toStr(this.search.realName)
        this.$confirm("是否导出用户数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          NProgress.start();
                NProgress.start()
          exportBlob(`/api/blade-system/user/export-user?${this.website.tokenHeader}=${getToken()}&account=${account}&realName=${realName}`).then(res => {
            downloadXls(res.data, `用户数据表${dateNow()}.xlsx`);
            NProgress.done();
                    downloadXls(res.data, `用户数据表${dateNow()}.xlsx`)
                    NProgress.done()
          })
        });
            })
      },
      handleTemplate() {
        exportBlob(`/api/blade-system/user/export-template?${this.website.tokenHeader}=${getToken()}`).then(res => {
          downloadXls(res.data, "用户数据模板.xlsx");
                downloadXls(res.data, "用户数据模板.xlsx")
        })
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getUser(this.form.id).then(res => {
            this.form = res.data.data;
                    this.form = res.data.data
            if(this.form.hasOwnProperty("deptId")){
              this.form.deptId = this.form.deptId.split(",");
                        this.form.deptId = this.form.deptId.split(",")
            }
            if(this.form.hasOwnProperty("roleId")){
              this.form.roleId = this.form.roleId.split(",");
                        this.form.roleId = this.form.roleId.split(",")
            }
            if(this.form.hasOwnProperty("postId")){
              this.form.postId = this.form.postId.split(",");
                        this.form.postId = this.form.postId.split(",")
            }
          });
                })
        }
        this.initFlag = true;
        done();
            this.initFlag = true
            done()
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
            this.page.currentPage = currentPage
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
            this.page.pageSize = pageSize
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
            this.onLoad(this.page, this.query)
      },
      onLoad(page, params = {}) {
        this.loading = true;
            this.loading = true
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query), this.treeDeptId).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            })
      },
      platformRowUpdate(row, index, done, loading) {
        updatePlatform(row.id, row.userType, row.userExt).then(() => {
          this.platformOnLoad(this.platformPage);
                this.platformOnLoad(this.platformPage)
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
                })
                done()
        }, error => {
          window.console.log(error);
          loading();
        });
                window.console.log(error)
                loading()
            })
      },
      platformBeforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getUserPlatform(this.platformForm.id).then(res => {
            this.platformForm = res.data.data;
          });
                    this.platformForm = res.data.data
                })
        }
        done();
            done()
      },
      platformSearchReset() {
        this.platformQuery = {};
        this.platformOnLoad(this.platformPage);
            this.platformQuery = {}
            this.platformOnLoad(this.platformPage)
      },
      platformSearchChange(params, done) {
        this.platformQuery = params;
        this.platformPage.currentPage = 1;
        this.platformOnLoad(this.platformPage, params);
        done();
            this.platformQuery = params
            this.platformPage.currentPage = 1
            this.platformOnLoad(this.platformPage, params)
            done()
      },
      platformSelectionChange(list) {
        this.platformSelectionList = list;
            this.platformSelectionList = list
      },
      platformSelectionClear() {
        this.platformSelectionList = [];
        this.$refs.platformCrud.toggleSelection();
            this.platformSelectionList = []
            this.$refs.platformCrud.toggleSelection()
      },
      platformCurrentChange(currentPage) {
        this.platformPage.currentPage = currentPage;
            this.platformPage.currentPage = currentPage
      },
      platformSizeChange(pageSize) {
        this.platformPage.pageSize = pageSize;
            this.platformPage.pageSize = pageSize
      },
      platformRefreshChange() {
        this.platformOnLoad(this.platformPage, this.platformQuery);
            this.platformOnLoad(this.platformPage, this.platformQuery)
      },
      platformOnLoad(page, params = {}) {
        this.platformLoading = true;
            this.platformLoading = true
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query), this.treeDeptId).then(res => {
          const data = res.data.data;
          this.platformPage.total = data.total;
          this.platformData = data.records;
          this.platformLoading = false;
          this.selectionClear();
        });
                const data = res.data.data
                this.platformPage.total = data.total
                this.platformData = data.records
                this.platformLoading = false
                this.selectionClear()
            })
      }
    }
  };
}
</script>

<style>

 src/warterMarkVUE.js

New file
@@ -0,0 +1,73 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-12-18 11:02:55
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-12-18 11:23:55
 * @FilePath: \jczz_web\src\warterMarkVUE.js
 * @Description:
 *
 * Copyright (c) 2023 by shuishen, All Rights Reserved.
 */
/*水印配置*/
//声明
let watermark = {};
//水印配置
let setWatermark = (str) => {
  let id = "1.23452384164.123412415";
  // 移除水印 判断
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id));
  }

  //创建画布
  let createCanvas = document.createElement("canvas");
  // 设置canvas画布大小
  createCanvas.width = 200; //宽度
  createCanvas.height = 160; //高度

  //创建Context2D对象作为2D渲染的上下文。
  let Context2D = createCanvas.getContext("2d");
  /*水印样式调整配置*/
  Context2D.rotate((-20 * Math.PI) / 100); // 水印旋转角度
  Context2D.font = "16px Vedana"; //水印文字大小
  Context2D.fillStyle = "#fff"; //水印颜色 HEX格式,可使用red 或者rgb格式
  Context2D.textAlign = "center"; //水印水平位置
  Context2D.textBaseline = "Middle"; //水印垂直位置
  Context2D.fillText(str, createCanvas.width / 2.8, createCanvas.height / 1);

  //创建元素
  let createDiv = document.createElement("div");
  createDiv.id = id;
  //水印默认设置
  createDiv.style.pointerEvents = "none"; //水印层事件穿透 让水印不阻止交互事件
  createDiv.style.top = "0px"; //水印顶部距离
  createDiv.style.left = "0px"; //水印左侧距离
  createDiv.style.opacity = "0.3"; //水印透明度
  createDiv.style.position = "fixed"; //水印定位
  createDiv.style.zIndex = "100000"; //水印样式优先显示
  createDiv.style.width = document.documentElement.clientWidth + "px"; //水印宽度
  createDiv.style.height = document.documentElement.clientHeight + "px"; //水印高度
  createDiv.style.background =
    "url(" +
    createCanvas.toDataURL("image/png") +
    ") left top repeat, rgba(0, 0, 0, 0.3)"; //水印显示(关键代码)
  document.body.appendChild(createDiv); //在指定元素节点的最后一个子节点之后添加节点
  return id;
};

// 此方法只允许调用一次
watermark.set = (str) => {
  let id = setWatermark(str);
  //设置间隔
  setInterval(() => {
    if (document.getElementById(id) === null) {
      id = setWatermark(str);
    }
  }, 500);
  //改变大小时执行
  window.onresize = () => {
    setWatermark(str);
  };
};

export default watermark;