【笔记】网站添加水印方法（watermark-dom）

最新推荐文章于 2024-09-13 22:15:19 发布

莫元涵

最新推荐文章于 2024-09-13 22:15:19 发布

阅读量1.1k

点赞数

分类专栏： npm vue 笔记文章标签： javascript 前端 watermark 水印

本文链接：https://blog.csdn.net/q9637410/article/details/125296990

版权

vue 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

笔记

8 篇文章 1 订阅

订阅专栏

npm

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中安装和使用watermark-dom插件来添加水印效果。首先通过npm安装watermark-dom，然后在utils文件夹下创建waterMark.js，导入并初始化水印配置，包括水印内容、角度、位置、透明度等参数。在组件中混合引入waterMark并调用initWaterMark方法实现在页面加载时添加水印。最后提供了github源码地址供参考。

摘要由CSDN通过智能技术生成

安装

npm install watermark-dom

使用

在utils新建waterMark.js，在文件里引用

import waterMark from '@/utils/waterMark'

export default {
  mixins: [waterMark],
}

waterMark.js

import watermark from 'watermark-dom'

export default {
  name: 'watermark',
  data () {
    return {
      waterMarkDom: 'watermark'
    }
  },
  mounted () {
    window.initWaterMark = this.initWaterMark
    this.initWaterMark()
  },
  methods: {
    initWaterMark () {
      watermark.init({
		watermark_txt: 'xxxx水印',        // 水印的内容
		watermark_angle: 20,              // 水印倾斜度数
		watermark_x: 0,                   // 水印起始位置x轴坐标
		watermark_y: 0,                   // 水印起始位置Y轴坐标
		watermark_width: 160,             // 水印宽度
		watermark_height: 80,             // 水印长度
		watermark_x_space: 0,             // 水印x轴间隔
		watermark_y_space: 0,             // 水印y轴间隔
		watermark_rows:0,                 // 水印行数
		watermark_cols: 4,                // 水印列数
		watermark_alpha: 0.08,            // 水印透明度，要求设置在大于等于0.005
		watermark_font:'微软雅黑',        // 水印字体
		watermark_color:'black',          // 水印字体颜色
		watermark_fontsize: '.24rem',     // 水印字体大小
		watermark_parent_width: '16rem',  // 水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）
		watermark_parent_height: '180vh', // 水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）
		watermark_parent_node:null        // 水印插件挂载的父元素element,不输入则默认挂在body上
      })
    }
  }
}