关于水印功能，网上的写法五花八门，不能让我很快速的copy到项目中 实现摸鱼自由。

基于此，出一份最简洁的水印功能，只需要三板斧 就能让各位义子们膝下乘凉~

现实功能：

1、全局水印；

2、根据localStorage控制水印显隐，退出登录时隐藏水印；

3、自动更新当前日期；

效果图：

步骤一：新建src/directives/watermark.js 这里直接copy即可。

/**

* @param {string} watermarkText 水印文本

* @returns {HTMLDivElement} 水印 DOM 元素

*/

function createWatermark(watermarkText) {

const can = document.createElement('canvas');

const ctx = can.getContext('2d');

can.width = 400;

can.height = 250;

ctx.font = '16px Microsoft YaHei';

ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';

ctx.textAlign = 'left';

ctx.textBaseline = 'middle';

ctx.rotate(-20 * Math.PI / 180);

// 获取当前日期

const currentDate = new Date();

const year = currentDate.getFullYear();

const month = currentDate.getMonth() + 1;

const day = currentDate.getDate();

const currentDateString = `${year}-${month}-${day}`;

ctx.fillText(`${watermarkText} ${currentDateString}`, can.width / 10, can.height / 2);

const div = document.createElement('div');

div.style.pointerEvents = 'none';

div.style.top = '0px';

div.style.left = '0px';

div.style.position = 'fixed';

div.style.zIndex = '100000';

div.style.width = '100%';

div.style.height = '100%';

div.style.background = `url(${can.toDataURL('image/png')}) repeat`;

return div;

}

// 自定义水印指令

export default {

bind(el, binding) {

const { watermarkText } = binding.value;

const watermarkDiv = createWatermark(watermarkText);

el.__watermark__ = watermarkDiv;

document.body.appendChild(watermarkDiv);

},

unbind(el) {

if (el.__watermark__) {

document.body.removeChild(el.__watermark__);

delete el.__watermark__;

}

}

};

步骤二：在main.js中 引入 并 注册 自定义组件

import watermark from './directives/watermark';

Vue.directive('watermark', watermark);

步骤三、在App.vue中全局挂载该组件，然后处理逻辑即可。

结语：

在完成以上步骤后，相信你的项目已经能够实现全局水印功能啦。

在退出登录时，需要将localStorage中的状态清除掉噢~