Vue中使用 watermark-dom 添加水印

Watermark-dom是一个可以给网页添水印、移除水印的插件，并可以对水印的样式进行许多丰富的设置。

以下是在Vue中使用该插件的方式：

<template><!-- App.vue 文件--><div id="app"><router-view /></div>
</template><script>// 安装文件,如果安装报错，可以用cnpm
// npm install watermark-dom --save
// npm install js-cookie --saveimport watermark from 'watermark-dom'
import Cookies from 'js-cookie'export default {name: "App",mounted(){setTimeout(()=>{// 在登录文件中，登录成功后，记得将用户名存到本地cookie中// Cookies.set('username',username);// 获取cookie中的username添加水印let username = Cookies.get('username');if(username){let now = new Date();let year = now.getFullYear();let month = now.getMonth()+1;let day = now.getDate();month = month<10?'0'+month:month;day = day<10?'0'+day:day;let date = year+'-'+month+'-'+day;watermark.load({ watermark_txt: username+','+date })}},1000)}
};
</script>

相当文档：https://github.com/saucxs/watermark-dom

Vue中使用 watermark-dom 添加水印相关推荐

浅谈Vue中的虚拟DOM
Virtual DOM 是JavaScript按照DOM的结构来创建的虚拟树型结构对象,是对DOM的抽象,比DOM更加轻量型为啥要使用Virtual DOM 当然是前端优化方面,避免频繁操作DOM, ...
vue中动态获取dom元素进行操作
这几天我远程面试了一家公司,期间问题我都回答上来了但有一个问题我很纳闷就是你说下vue中获取dom元素的方法吧我说大体上俩中吧 1.vue中 ref的方法给元素起一个ref名称通过 th ...
简单实现Vue中的虚拟dom
简单实现Vue中的虚拟dom 传送门:简单实现Vue中的插值替换(三) 前言: 要想简单实现虚拟dom,首先我们要了解虚拟dom,知道自己要实现的是个什么东西. 说起来,我刚开始学习Vue的时候对虚拟 ...
vue 中的虚拟dom树
虚拟DOM树其实就是一个普通的js对象,它是用来描述一段HTML片段的当页面渲染的时候Vue会创建一颗虚拟DOM树当页面发生改变Vue会再创建一颗新的虚拟DOM树前后两颗新旧虚拟DOM树进行对比 ...
实用有效！React项目中使用watermark.js添加水印效果
为了避免公司的内部文档被截图外泄,有必要在系统页面上面增加水印. 第一步: 下载依赖包: npm install watermark-dom package.json中会添加一个依赖如下: " ...
vue - vue中实现对图片添加水印和截图的功能
文章目录 1,添加水印 2,图片截图 3,上传多个图片同时并添加上水印 1,添加水印选择上传一张图片,使用cavans对其添加水印: 我这里使用的是vantUI的uploader组件上传图片,当然也 ...
Vue中的虚拟DOM
文章目录一.什么是虚拟DOM 二.虚拟DOM的作用提高性能三.通过模板转换成视图来理解一.什么是虚拟DOM 我们都知道DOM是什么,它是实实在在的被渲染在页面上的,我们平时的操作都和DOM息息 ...
vue中的虚拟DOM原理
1.定义: 虚拟DOM其实就是用一个原生的JS对象去描述一个DOM节点,实际上它只是对真实 DOM 的一层抽象.最终可以通过一系列操作使这棵树映射到真实环境上. 相当于在js与DOM之间做了一个缓存, ...
Vue中的 ref 和 $refs
官网解释: ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例 ...
Vue中 $ref 的用法
ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例注意:只要想 ...

Vue中使用 watermark-dom 添加水印

Vue中使用 watermark-dom 添加水印相关推荐

最新文章

热门文章