在utils文件夹中创建 wartermark.ts 文件(位置看自己的组件放那,这都行),内容如下:

 1 "use strict";
2
3 const setWatermark = (str: any) => {
4 const id = "1.23452384164.123412416";
5
6 if (document.getElementById(id) !== null) {
7 document.body.removeChild(document.getElementById(id) as any);
8 }
9
10 //创建一个画布
11 const can = document.createElement("canvas");
12 //设置画布的长宽
13 can.width = 250;
14 can.height = 120;
15
16 const cans: any = can.getContext("2d");
17 //旋转角度
18 cans.rotate((-15 * Math.PI) / 150);
19 cans.font = "18px Vedana";
20 //设置填充绘画的颜色、渐变或者模式
21 cans.fillStyle = "rgba(200, 200, 200, 0.30)";
22 //设置文本内容的当前对齐方式
23 cans.textAlign = "left";
24 //设置在绘制文本时使用的当前文本基线
25 cans.textBaseline = "Middle";
26 //在画布上绘制填色的文本(输出的文本,开始绘制文本的X坐标位置,开始绘制文本的Y坐标位置)
27 cans.fillText(str, can.width / 8, can.height / 2);
28
29 const div = document.createElement("div");
30 div.id = id;
31 div.style.pointerEvents = "none";
32 div.style.top = "35px";
33 div.style.left = "0px";
34 div.style.position = "fixed";
35 div.style.zIndex = "100000";
36 div.style.width = document.documentElement.clientWidth + "px";
37 div.style.height = document.documentElement.clientHeight + "px";
38 div.style.background =
39 "url(" + can.toDataURL("image/png") + ") left top repeat";
40 document.body.appendChild(div);
41 return id;
42 };
43 const watermark = {
44 // 该方法只允许调用一次
45 set: (str: any) => {
46 let id = setWatermark(str);
47 setInterval(() => {
48 if (document.getElementById(id) === null) {
49 id = setWatermark(str);
50 }
51 }, 500);
52 window.onresize = () => {
53 setWatermark(str);
54 };
55 }
56 }
57 export default watermark;

2、在API.vue文件中引用 wartermark.ts 

 1 <script lang="ts">
2 import './assets/styles/base.scss'
3 import { Component, Vue } from 'vue-property-decorator'
4 import { theme, getQueryString } from '@/utils/util'
5 import logoutUrl from '@/utils/api/logoutUrl'
6
7 import Watermark from '@/utils/main/wartermark';
8
9 export default class App extends Vue {
10 mounted () {
11 Watermark.set("水印内容")
12 }
13
14 }
15 </script>

最新vue项目添加水印的更多相关文章

  1. Vue项目开发最新、最全代码规范文档

    Vue项目开发最新.最全代码规范文档 2019年02月21日 10:43:49 yw00yw 阅读数 337   一. 目录结构 |— build 构建脚本目录 |— build.js 生产环境构建( ...

  2. vue-cli快速构建Vue项目

    vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...

  3. 如何快速把 Vue 项目升级到 webpack3

    由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能 ...

  4. cordova+vue 项目打包成Android(apk)应用

    现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题.现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只 ...

  5. 搭建vue项目环境

    前言 在开发本项目之前,我对vue,react,angular等框架了解,仅限于知道它们是什么框架,他们的核心是什么,但是并没有实际使用过(angular 1.0版本用过,因为太难用,所以对这类框架都 ...

  6. vue项目中的常见问题

    总结了几个vue项目开发过程中遇到的常见问题,希望大家注意. 注:文末有福利! 一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader -- ...

  7. 原有vue项目接入typescript

    原有vue项目接入typescript 为什么要接入typescript javascript由于自身的弱类型,使用起来非常灵活. 这也就为大型项目.多人协作开发埋下了很多隐患.如果是自己的私有业务倒 ...

  8. element-ui和npm、webpack、vue-cli搭建Vue项目

    一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...

  9. rem的在vue项目中使用配置,,浏览器的兼容性之Mate标签

    在vue中配置rem 位置:在APP.vue的script中,在export default之外 (()=>{ let winW = document.documentElement.clien ...

随机推荐

  1. day45:JS中的json&JS的BOM操作和DOM操作

    目录 1.补充:CSS中的弹性盒子 2.JS中json的序列化 3.JS中的BOM操作 3.1 location操作 3.2 计时器 4.JS中的DOM操作 4.1 创建标签 4.2 查找标签 4.3 ...

  2. Unity Prefab关联

    Unity3D研究院之Prefab里面的Prefab关联问题http://www.xuanyusong.com/archives/3042

  3. 精选PDF版本书籍第一期

    福利概述 精选JAVA必读书籍的PDF版本(来源于网络,侵删). Effective java 中文版(第2版) Head First 设计模式(中文版) Java并发编程的艺术 Java技术手册(第 ...

  4. 为什么一个还没毕业的大学生能够把 IO 讲的这么好?

    Java IO 是一个庞大的知识体系,很多人学着学着就会学懵了,包括我在内也是如此,所以本文将会从 Java 的 BIO 开始,一步一步深入学习,引出 JDK1.4 之后出现的 NIO 技术,对比 N ...

  5. 03 父子组件sync&update

    父组件传给子组件是基本数据类型. 父组件 <template> <el-container class="consele-container"> <e ...

  6. python应用 曲线拟合04

    python应用 曲线拟合04 → 多项式拟合 主要是使用 numpy 库中的 polyfit() 函数,见第 66 行, z = np.polyfit(x_proton, y, 3) ,其中待拟合曲 ...

  7. IT行业程序开发如何

    学习程序开发怎么样,由于软件开发涉及到的知识结构比较丰富,所以学习软件开发通常需要一个系统的学习过程.如果未来要想专业从事软件开发工作,那么可以按照以下步骤学习软件开发技术: 第一:从计算机操作系统开 ...

  8. python调用接口——requests模块

    前提:安装pip install requests 导入import requests 1.get请求   result=requests.get(url,d).json()  或  .text 2. ...

  9. 编译 lua cjson模块

    使用文档:http://www.kyne.com.au/~mark/software/lua-cjson-manual.html下载地址:http://www.kyne.com.au/%7Emark/ ...

  10. Python+Appium运行简单的demo,你需要理解Appium运行原理!

    坚持原创输出,点击蓝字关注我吧 作者:清菡 博客:oschina.云+社区.知乎等各大平台都有. 目录 一.Appium 的理念 四个原则 1.Web-Selenium 的运行原理 2.Appium ...