前端在vue项目中显示和隐藏水印

1.先在工具包写一个脚本

let defaultSettings = {

    watermark_id: 'wm_div_id', // 水印总体的id

    watermark_prefix: 'mask_div_id', // 小水印的id前缀

    watermark_txt: '测试水印', // 水印的内容

    watermark_x: 20, // 水印起始位置x轴坐标

    watermark_y: 20, // 水印起始位置Y轴坐标

    watermark_rows: 0, // 水印行数

    watermark_cols: 0, // 水印列数

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

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

    watermark_font: '微软雅黑', // 水印字体

    watermark_color: 'black', // 水印字体颜色

    watermark_fontsize: '18px', // 水印字体大小

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

    watermark_width: 100, // 水印宽度

    watermark_height: 100, // 水印长度

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

    watermark_parent_width: 0, // 水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）

    watermark_parent_height: 0, // 水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）

    watermark_parent_node: null, // 水印插件挂载的父元素element,不输入则默认挂在body上

    monitor: true // monitor 是否监控， true: 不可删除水印; false: 可删水印。

}

class WaterMark {

        constructor(options) {

        this.globalSetting = null

        this.init(options)

    }

    settingsToDefaultSetting(settings) {

        defaultSettings.watermark_id = settings.watermark_id || defaultSettings.watermark_id

        defaultSettings.watermark_prefix = settings.watermark_prefix || defaultSettings.watermark_prefix

        defaultSettings.watermark_txt = settings.watermark_txt || defaultSettings.watermark_txt

        defaultSettings.watermark_x = settings.watermark_x || defaultSettings.watermark_x

        defaultSettings.watermark_y = settings.watermark_y || defaultSettings.watermark_y

        defaultSettings.watermark_rows = settings.watermark_rows || defaultSettings.watermark_rows

        defaultSettings.watermark_cols = settings.watermark_cols || defaultSettings.watermark_cols

        defaultSettings.watermark_x_space = settings.watermark_x_space || defaultSettings.watermark_x_space

        defaultSettings.watermark_y_space = settings.watermark_y_space || defaultSettings.watermark_y_space

        defaultSettings.watermark_font = settings.watermark_font || defaultSettings.watermark_font

        defaultSettings.watermark_color = settings.watermark_color || defaultSettings.watermark_color

        defaultSettings.watermark_fontsize = settings.watermark_fontsize || defaultSettings.watermark_fontsize

        defaultSettings.watermark_alpha = settings.watermark_alpha || defaultSettings.watermark_alpha

        defaultSettings.watermark_width = settings.watermark_width || defaultSettings.watermark_width

        defaultSettings.watermark_height = settings.watermark_height || defaultSettings.watermark_height

        defaultSettings.watermark_angle = settings.watermark_angle || defaultSettings.watermark_angle

        defaultSettings.watermark_parent_width = settings.watermark_parent_width || defaultSettings.watermark_parent_width

        defaultSettings.watermark_parent_height = settings.watermark_parent_height || defaultSettings.watermark_parent_height

        defaultSettings.watermark_parent_node = settings.watermark_parent_node || defaultSettings.watermark_parent_node

        defaultSettings.monitor = settings.monitor || defaultSettings.monit