vue后台水印实现

<template>
    <router-view
        v-waterMark="waterCode"
    ></router-view>
</template>

<script>
import waterMark from 'common/utils/watermark';
export default {
    
    directives: {
    
        waterMark: waterMark,
    },
    computed: {
    
        waterCode() {
    
            return {
    text: `平台机密数据`,
                    style: {
    
                        'width': 700, // 单个水印的宽
                        'height': 300, // 单个水印的高
                        'font': 'normal 22px Microsoft Yahei', // 设置样式
                        'fillStyle': 'rgba(112, 113, 114, 0.1)', // 水印字体颜色
                        'rotate': (30 * Math.PI / 180), // 水印偏转角度
                    },
            };
        },
    },
};
</script>

/**
 * @file 网页水印
 */
/*eslint-disable*/
let watermark = {
   
    text: 'text',
    style: {
   },
    isAllowDele: false,
    maskDiv: '',
    init: (text) => {
   
        let canvas = document.createElement('canvas');
        canvas.id = 'canvas';
        canvas.width = watermark