From 298607bdf3225d2df4ff4949ac7cfaa61f48640b Mon Sep 17 00:00:00 2001 From: wanglei Date: Thu, 9 May 2024 13:42:05 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A1=A3=E6=A1=88=E7=9B=AE=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dangan-ui/public/index.html | 2 +- dangan-ui/src/layout/components/AppMain.vue | 7 +- dangan-ui/src/utils/watermark.js | 63 ++++++ dangan-ui/src/views/dangan/catalog/index.vue | 209 +++++++++++-------- 4 files changed, 187 insertions(+), 94 deletions(-) create mode 100644 dangan-ui/src/utils/watermark.js diff --git a/dangan-ui/public/index.html b/dangan-ui/public/index.html index 925455c..c45933b 100644 --- a/dangan-ui/public/index.html +++ b/dangan-ui/public/index.html @@ -195,7 +195,7 @@ } - +
diff --git a/dangan-ui/src/layout/components/AppMain.vue b/dangan-ui/src/layout/components/AppMain.vue index a25c562..49bf2fc 100644 --- a/dangan-ui/src/layout/components/AppMain.vue +++ b/dangan-ui/src/layout/components/AppMain.vue @@ -10,7 +10,8 @@ diff --git a/dangan-ui/src/utils/watermark.js b/dangan-ui/src/utils/watermark.js new file mode 100644 index 0000000..2de9783 --- /dev/null +++ b/dangan-ui/src/utils/watermark.js @@ -0,0 +1,63 @@ +let watermark = {} + +let setWatermark = (str,date) => { + let id = '1.23452384164.123412416' + + if (document.getElementById(id) !== null) { + document.body.removeChild(document.getElementById(id)) + } + + //创建一个画布 + let can = document.createElement('canvas') + //设置画布的长宽 + can.width = 200 + can.height = 150 + + let cans = can.getContext('2d') + //旋转角度 + cans.rotate(-15 * Math.PI / 180) + cans.font = '14px Vedana' + //设置填充绘画的颜色、渐变或者模式 + cans.fillStyle = 'rgba(200, 200, 200, 0.40)' + //设置文本内容的当前对齐方式 + cans.textAlign = 'left' + //设置在绘制文本时使用的当前文本基线 + cans.textBaseline = 'Middle' + //在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置） + cans.fillText(str, can.width / 4, can.height / 2) + cans.fillText(date,can.width / 4, can.height / 3) + let div = document.createElement('div') + div.id = id + div.style.pointerEvents = 'none' + div.style.top = '30px' + div.style.left = '0px' + div.style.position = 'absolute' + div.style.zIndex = '100' + div.style.width = document.documentElement.clientWidth + 'px' + div.style.height = document.documentElement.clientHeight + 'px' + div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat' + // document.body.appendChild(div) + div.style.opacity = '0.6' // 水印的透明度 + document.body.appendChild(div) + return id +} + +// 该方法只允许调用一次 +watermark.set = (str,date) => { + let id = setWatermark(str,date) // str,date代表的是两行水印。如果需好几个的话再追加。 + setInterval(() => { + if (document.getElementById(id) === null) { + id = setWatermark(str,date) + } + }, 500); + window.onresize = () => { + setWatermark(str,date) + }; +} +watermark.remove = () => { + let id = '1.23452384164.123412416' + if (document.getElementById(id) !== null) { + document.body.removeChild(document.getElementById(id)) + } +} +export default watermark diff --git a/dangan-ui/src/views/dangan/catalog/index.vue b/dangan-ui/src/views/dangan/catalog/index.vue index 5d2d288..62bf243 100644 --- a/dangan-ui/src/views/dangan/catalog/index.vue +++ b/dangan-ui/src/views/dangan/catalog/index.vue @@ -9,14 +9,6 @@ @keyup.enter.native="handleQuery" /> - - - 修改 - - - 删除 - - - 导出 + @click="toggleExpandAll" + >展开/折叠 - - - + + - - - - + + + + + + - - + + + + - - - - + + + + + {{dict.label}} + @@ -149,33 +150,33 @@