vue的水印怎么修改（vue实现页面div添加水印）

let watermark = {}; let setWatermark = (text, sourceBody) => { // let id = "watermark_fjq_" parseInt(Math.random() * 100000); let id = "watermark_fjq_3.1415926"; if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)); } //水印图片 let can = document.createElement("canvas"); can.width = 250; // 单个水印大小 can.height = 120; // 单个水印大小 let cans = can.getContext("2d"); cans.rotate((-20 * Math.PI) / 180); cans.font = "15px Vedana"; // cans.fillStyle = "#DCDCDC"; //水印颜色 cans.fillStyle = "rgba(1, 1, 1, 0.3)"; cans.textAlign = "left"; cans.textBaseline = "Middle"; cans.fillText(text, can.width / 20, can.height); //设置插入div样式 let water_div = document.createElement("div"); water_div.id = id; water_div.style.pointerEvents = "none"; water_div.style.overflow = "hidden"; water_div.style.background = "url(" can.toDataURL("image/png") ") left top repeat"; if (sourceBody) { sourceBody.style.position = "relative"; water_div.style.width = "100%"; water_div.style.height = "100%"; water_div.style.position = "absolute"; water_div.style.top = "0"; water_div.style.left = "0"; sourceBody.appendChild(water_div); } else { water_div.style.top = "3px"; water_div.style.left = "0px"; water_div.style.position = "fixed"; water_div.style.zIndex = "9999"; water_div.style.width = document.documentElement.clientWidth "px"; water_div.style.height = document.documentElement.clientHeight "px"; document.body.appendChild(water_div); } return id; }; let removeWatermark = sourceBody => { let id = "watermark_fjq_3.1415926"; sourceBody.removeChild(document.getElementById(id)); }; /** * 该方法只允许调用一次 * @param: * @text == 水印内容 * @sourceBody == 水印添加在哪里，不传就是body * */ watermark.set = (text, sourceBody) => { setTimeout(() => { setWatermark(text, sourceBody); }, 1000); //延迟加载 }; watermark.remove = sourceBody => { removeWatermark(sourceBody); }; export default watermark; 页面引入

import watermark from "../../../../libs/utils/watermark";页面标签声明ref引用

• 在页面数据渲染完成后创建(根据具体业务场景而定)

this.$nextTick(() => { watermark.set(res.data.data.clashNumber, this.$refs.table);//某个div需要水印, 需要提前给div设置ref属性 });

• 页面关闭时销毁水印(避免重复创建)

watermark.remove(this.$refs.table)页面完整代码

<template> <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancelHandler" :visible.sync="isShow" width="40%"> <div class="container" ref="table"> <div class="info"> <el-row class="title-row"> <div>{{dataInfo.title}}</div> </el-row> <el-row class="common-row"> <el-col class="common-col" :span="6"> <div>卷号</div> </el-col> <el-col class="common-col" :span="18"> <div>{{ dataInfo.clashNumber }}</div> </el-col> </el-row> <el-row class="common-row"> <el-col class="common-col" :span="6"> <div>村庄</div> </el-col> <el-col class="common-col" :span="18"> <div>{{ dataInfo .villageName}}</div> </el-col> </el-row> <el-row class="common-row"> <el-col class="common-col" :span="6"> <div>申请人姓名</div> </el-col> <el-col class="common-col" :span="6"> <div>{{ dataInfo.submitter }}</div> </el-col> <el-col class="common-col" :span="6"> <div>联系方式</div> </el-col> <el-col class="common-col" :span="6"> <div>{{ dataInfo.submitterPhone }}</div> </el-col> </el-row> <el-row class="common-row"> <el-col class="common-col" :span="6"> <div>调解员</div> </el-col> <el-col class="common-col" :span="6"> <div>{{ dataInfo.mediator }}</div> </el-col> <el-col class="common-col" :span="6"> <div>联系方式</div> </el-col> <el-col class="common-col" :span="6"> <div>{{ dataInfo.mediatorPhone }}</div> </el-col> </el-row> <el-row class="common-row"> <el-col class="common-col" :span="6"> <div>法律顾问</div> </el-col> <el-col class="common-col" :span="6"> <div>{{ dataInfo.lawyer }}</div> </el-col> <el-col class="common-col" :span="6"> <div>联系方式</div> </el-col> <el-col class="common-col" :span="6"> <div>{{ dataInfo.lawyerPhone }}</div> </el-col> </el-row> <el-row class="common-row"> <el-col class="common-col" :span="6"> <div>纠纷类型</div> </el-col> <el-col class="common-col" :span="18"> <div>{{ dataInfo.typeName }}</div> </el-col> </el-row> <el-row class="common-row"> <el-col class="common-col" :span="6"> <div>纠纷事由</div> </el-col> <el-col class="common-col" :span="18"> <div>{{ dataInfo.clashInfo }}</div> </el-col> </el-row> <el-row class="common-row"> <el-col class="common-col" :span="6"> <div>受理日期</div> </el-col> <el-col class="common-col" :span="18"> <div>{{ dataInfo.startTime }}</div> </el-col> </el-row> <el-row class="common-row"> <el-col class="common-col" :span="6"> <div>办结日期</div> </el-col> <el-col class="common-col" :span="18"> <div>{{ dataInfo.endTime }}</div> </el-col> </el-row> <el-row class="common-row"> <el-col class="ercode-col" :span="24"> <div> <VueQr :text="qrcode" :size="250"> </VueQr> </div> </el-col> </el-row> </div> </div> <div slot="footer" class="dialog-footer"> <el-button type="text" @click="cancelHandler">取消</el-button> <el-button :loading="loading" type="primary" icon="el-icon-printer" @click="printHandler">打印</el-button> </div> </el-dialog> </template> <script> import VueQr from "vue-qr"; import watermark from "../../../../libs/utils/watermark"; export default { components: { VueQr }, //this.qrcode = `http://jabberwocky.natapp1.cc/api/sange/qrCode/chash?clashId=${id}`; computed: { qrcode() { return `http://jabberwocky.natapp1.cc/api/sange/qrCode/chash?clashId=${this.dataForm.id}`; } }, data() { return { loading: false, action: "", dataForm: { id: "", title: "山东省冠县", villageName: "白佛头村", name: "人民调解案宗" }, dataInfo: {}, isShow: false }; }, methods: { init(id) { this.dataForm.id = id; this.isShow = true; this.loadData(); }, loadData() { this.$api.clashGenArchive(this.dataForm.id).then(res => { console.log("clashGenArchive ", res); this.dataInfo = res.data.data; this.$nextTick(() => { watermark.set(res.data.data.clashNumber, this.$refs.table);//某个div需要水印, 需要提前给div设置ref属性 }); }); }, arraySpanMethod({ row, column, rowIndex, columnIndex }) { if (rowIndex === 0 || rowIndex === 9) { if (columnIndex === 0) { return [1, 2]; } else if (columnIndex === 1) { return [0, 0]; } } }, cancelHandler() { watermark.remove(this.$refs.table) this.$emit("finish"); this.isShow = false; this.resetForm(); }, printHandler() { this.$print(this.$refs.table); }, resetForm() { this.dataList = {}; } } }; </script> <style scoped> .info { text-align: center; height: 1048px; width: 720px; /* background: url("../../../../../src/assets/bj.png") no-repeat; background-size: cover; */ } .container { display: flex; align-items: center; } .title-row { border: 1px solid black; font-size: xx-large; font-weight: bold; } .common-row {} .common-col { border: 1px solid black; height: 76px; display: flex; align-items: center; justify-content: center; } .ercode-col { border: 1px solid black; height: 310px; display: flex; align-items: center; justify-content: center; } .common-col div { /* margin-top: 15px; */ font-weight: bold; } </style> ,