'admin-20.12.22:新增页面水印效果'

vue-admin-wonderful-next/src/App.vue

@@ -21,6 +21,9 @@
     <span>灰色模式</span>
     <el-switch v-model="value1" @change="onSwitchChange1"></el-switch>
     <el-divider></el-divider>
+    <span>开启水印</span>
+    <el-switch v-model="wart" @change="onSwitchChange2"></el-switch>
+    <el-divider></el-divider>
     <div>Button 按钮</div>
     <el-row>
       <el-button>默认按钮</el-button>
@@ -627,12 +630,16 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs } from "vue";
+import { reactive, toRefs, getCurrentInstance } from "vue";
 import { getLightColor } from "/@/utils/theme.ts";
+import Watermark from "/@/utils/wartermark.ts";
 import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
 export default {
   name: "App",
   setup() {
+    const { proxy } = getCurrentInstance();
+    // proxy.$message("mesage")
+
     const generateData = (_) => {
       const data = [];
       for (let i = 1; i <= 15; i++) {
@@ -905,6 +912,7 @@ export default {
           })(),
         },
       ],
+      wart: false,
     });
     function colorChange1() {
       document.documentElement.style.setProperty(
@@ -1116,11 +1124,16 @@ export default {
     function onSwitchChange1() {
       document.body.setAttribute(
         "style",
-        `filter:grayscale(${state.value1 ? 1 : 0})`
+        state.value1 ? `filter:grayscale(1);overflow:hidden;` : ""
       );
     }
+    function onSwitchChange2() {
+      state.wart
+        ? Watermark.set("small@小柒")
+        : Watermark.del();
+    }
     function open1() {
-      ElMessage.success({
+      proxy.$message.success({
         message: "恭喜你，这是一条成功消息",
         type: "success",
       });
@@ -1208,6 +1221,7 @@ export default {
       open9,
       next,
       onSwitchChange1,
+      onSwitchChange2,
       ...toRefs(state),
     };
   },

vue-admin-wonderful-next/src/theme/element.scss

@@ -757,6 +757,10 @@
 
 /* Timeline 时间线
 ------------------------------- */
+// primary
+.el-timeline-item__node--primary {
+  background-color: set-color(primary);
+}
 // success
 .el-timeline-item__node--success {
   background-color: set-color(success);

vue-admin-wonderful-next/src/utils/wartermark.ts

@@ -0,0 +1,43 @@
+// 页面添加水印效果
+const setWatermark = (str: any) => {
+    const id = "1.23452384164.123412416";
+    if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id) as any);
+    const can = document.createElement("canvas");
+    can.width = 250;
+    can.height = 180;
+    const cans: any = can.getContext("2d");
+    cans.rotate((-20 * Math.PI) / 180);
+    cans.font = "12px Vedana";
+    cans.fillStyle = "rgba(200, 200, 200, 0.30)";
+    cans.textAlign = "center";
+    cans.textBaseline = "Middle";
+    cans.fillText(str, can.width / 10, can.height / 2);
+    const div = document.createElement("div");
+    div.id = id;
+    div.style.pointerEvents = "none";
+    div.style.top = "35px";
+    div.style.left = "0px";
+    div.style.position = "fixed";
+    div.style.zIndex = "100000";
+    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);
+    return id;
+};
+
+const watermark = {
+    // 设置水印
+    set: (str: any) => {
+        let id = setWatermark(str);
+        if (document.getElementById(id) === null) id = setWatermark(str);
+        window.onresize = () => { setWatermark(str) };
+    },
+    // 删除水印
+    del: () => {
+        let id = '1.23452384164.123412416';
+        if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id) as any);
+    }
+}
+
+export default watermark;