vue中后台管理中使用水印

先安装水印插件

npm install --save watermark-dom 

 然后在全部页面应用  AppMain.vue

<script>

import { mapGetters } from "vuex";

import watermark from "watermark-dom";

export default {

  name: "AppMain",

  computed: {

    key() {

      return this.$route.path;

    },

    ...mapGetters(["nickName"]),

  },

  mounted() {

    // 加载水印

    watermark.load({

      watermark_txt: "系统" + "-" + this.nickName, //水印内容

      watermark_fontsize: "16px", //z字体大小

      watermark_alpha: 0.1, //水印透明度，要求设置在大于等于0.005

      watermark_width: 160, //水印宽度

      watermark_x_space: 150, //水印x轴间隔

      watermark_y_space: 100, //水印y轴间隔

      watermark_angle: 20, //水印倾斜度数

    });

  },

};

</script>

 在echarts图中添加水印

        var chartDom = document.getElementById("main");

        var myChartA = echarts.init(chartDom);

        var option;

        // //绘制水印

        // const waterMarkText = “水印内容”;

        // const canvas = document.createElement("canvas");

        // const ctx = canvas.getContext("2d");

        // canvas.width = canvas.height = 100;

        // ctx.textAlign = "center";

        // ctx.textBaseline = "middle";

        // ctx.globalAlpha = 0.2; //透明度

        // ctx.fillStyle = "#72A0FF"; //字体颜色

        // ctx.font = "14px Microsoft Yahei"; //字体大小样式

        // ctx.translate(50, 50);

        // ctx.rotate(-Math.PI / 4);

        // ctx.fillText(waterMarkText, 0, 0);

        option = {

          //   backgroundColor: {

          //     //在背景属性中添加

          //     type: "pattern",

          //     image: canvas,

          //     repeat: "repeat",

          //   },

        }