Vue项目实现添加水印

2023-12-20 11:35:08

vue项目需要实现添加水印的功能，实现如下：

  1. 引入watermark-dom依赖包
npm install watermark-dom
  1. App.vue引入
import watermark from "watermark-dom";
  1. 初始化水印参数
mounted() {
    watermark.load({watermark_txt: "测试",watermark_color: '#ED8D29',watermark_width: 240});
  },

附：

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:100,              //水印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上

文章来源:https://blog.csdn.net/Shiny_boy_/article/details/135102141
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。