Vue implements the function of adding watermarks on pages

Create a file

let watermark = {}

let setWatermark = (str) =&gt; {
 let id = '1.23452384164.123412416';

 if ((id) !== null) {
 ((id));
 }

 //Create a canvas let can = ('canvas');
 //Set the length and width of the canvas  = 120;
  = 120;

 let cans = ('2d');
 //Rotation angle (-15 *  / 180);
  = '18px Vedana';
 //Set the color, gradient or mode of filling the painting  = 'rgba(200, 200, 200, 0.40)';
 //Set the current alignment of text content  = 'left';
 //Set the current text baseline used when drawing text  = 'Middle';
 //Draw the filled text on the canvas (the output text, start drawing the X coordinate position of the text, start drawing the Y coordinate position of the text) (str,  / 8,  / 2);

 let div = ('div');
  = id;
  = 'none';
  = '30px';
  = '0px';
  = 'fixed';
  = '100000';
  =  + 'px';
  =  + 'px';
  = 'url(' + ('image/png') + ') left top repeat';
 (div);
 return id;
}

// This method is only allowed to be called once = (str) =&gt; {
 let id = setWatermark(str);
 setInterval(() =&gt; {
 if ((id) === null) {
  id = setWatermark(str);
 }
 }, 500);
  = () =&gt; {
 setWatermark(str);
 };
}

export default watermark;

Specific usage:

1. In the file, import the file

import Watermark from '@/common/js/watermark'; //Don't write the path incorrectly

2. Call in mounted function

mounted: function () {
 ("Watermark Content")
}

Note:

Generally, our watermark content is the id or name of the current user. It is possible that Vuex user information may not be obtained in the mounted function of the file.

We generally make judgments on user login and permissions when routing jumps, so we can place the method of calling watermarks in the() method to judge the user's login and permissions in the() method, so the user information in vuex can be obtained in the() method.

Example:

((to, from, next) =&gt; {
 // Login to judge ('getuser').then((user) =&gt; {
 if ( === '/') {
  if () {
  next('/Summary');
  } else { next('/list'); }
 } else {
  next();
 }
 }).catch((error) =&gt; {
 if ( === 'noUser') {
  //Return to the login interface } else {
  ({
  title: 'Server Error',
  message: 'If you fail to obtain user information, you can try to re-enter the system.  ',
  showCancelButton: false,
  showConfirmButton: false
  });
 }
 });
});
((to) =&gt; {
 /* Change the route page title */
 if () {
 changTitle();
 }
 ();
});

The above article on the Vue implementation page adds watermark function is all the content I share with you. I hope you can give you a reference and I hope you can support me more.