vue项目中添加水印效果

基于vue的架构中，在网页中添加水印效果，具体实现代码如下：

新建js文件：例如warterMark.js

'use strict'let watermark = {}let setWatermark = (str) => {let id = '1.23452384164.123412415'if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id))}let can = document.createElement('canvas')can.width = 150can.height = 120let cans = can.getContext('2d')cans.rotate(-20 * Math.PI / 180)cans.font = '20px Vedana'cans.fillStyle = 'rgba(200, 200, 200, 0.20)'cans.textAlign = 'left'cans.textBaseline = 'Middle'cans.fillText(str, can.width / 3, can.height / 2)let div = document.createElement('div')div.id = iddiv.style.pointerEvents = 'none'div.style.top = '70px'div.style.left = '0px'div.style.position = 'fixed'div.style.zIndex = '100000'div.style.width = document.documentElement.clientWidth - 100 + 'px'div.style.height = document.documentElement.clientHeight - 100 + 'px'div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'document.body.appendChild(div)return id
}// 该方法只允许调用一次
watermark.set = (str) => {let id = setWatermark(str)setInterval(() => {if (document.getElementById(id) === null) {id = setWatermark(str)}}, 500)window.onresize = () => {setWatermark(str)}
}export default watermark

使用方式：

在App.vue文件中引入该js文件：

import warterMark from './warterMark'

接下来再App.vue中的mounted方法中调用，代码如下所示：

<script>
import Watermark from '../static/js/watermark'
export default {name: 'App',mounted: function () {Watermark.set('要添加的水印内容')}
}
</script>

vue项目中添加水印效果相关推荐

vue 项目中添加水印效果
在项目中有给部分区域或者是整个页面添加水印的需求.加水印其实很简单,它的原理是使用 canvas 生成图片在使用 toDataURL 转化为 base64 格式,然后将转换后的图片设置为背景图,从而实 ...
在vue项目中使用gsap，实现极佳的2d动画效果
在vue项目中使用gsap,实现极佳的2d动画效果一.GSAP是什么? 二.使用步骤 1.引入库 2.在vue中使用 3.vue组件使用gsap完整代码总结一.GSAP是什么? GSAP全称是G ...
vue 项目中使用v-loading实现加载效果
当在vue项目中请求后台接口时,常常会使用 loding 过渡数据的加载时间. 如果 loading 作为一个全局的加载状态,应该写在项目中的App.vue中在el-table标签中添加v-load ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
MxGraph从入门到精通之5：在Vue项目中使用MxGraph
第一步:安装npm包 npm install mxgraph 第二步:在mxgraph.vue中使用mxgraph <template><div><div ref=&qu ...
怎么改vue项目的标题_如何动态修改Vue项目中的页面title
前言:在项目中,我们有时候需要修改Vue项目中的页面title. 方法有两种,①如果需要动态设置页面的title,可以直接使用document.title:②可以使用router的beforeEach ...
vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

vue项目中添加水印效果

vue项目中添加水印效果相关推荐

最新文章

热门文章