vue-element-admin 中水印watermark的使用

水印代码虽说稍微跟一下代码就能找到,不过小编还是决定做个笔记,希望能多多少少节约一点有缘人的时间。

水印代码实现相关文件如下:

src\utils\watermark.js

watermark.set = (str) => {
  let id = setWatermark(str)
  setInterval(() => {
    if (document.getElementById(id) === null) {
      id = setWatermark(str)
    }
  }, 2000)
  window.onresize = () => {
    setWatermark(str)
  }
}
export default watermark

src\main.js

import watermark from '@/utils/watermark'

Vue.prototype.$watermark = watermark;

src\views\layout\Layout.vue

mounted(){
    let wm=this.$store.getters.orgName+this.$store.getters.userId
    this.$watermark.set(wm);
    // this.$watermark.set('3232434');
},
版权声明

翼安博客


首发 翼安博客,转载请附链接!

赞赏支持

感谢支持!


建站不易,感谢支持!

推荐阅读
web开发技术栈(框架)总结
Bootstrap-Layui-Amazeui-jQuery-vue-react-AngularJS-ci-Thinkphp-Yii-Laravel-Node-Django-springMVC-apache-nginx-mysql-redis…… 天呐,好多…… 小编虽说出身工业软件,但心里一直藏着一个UI梦。近两年,小编业余时间从零开始摸索web开发,把web开发常用的技术和框
3457

web前端开发技术储久良第三版答案整理(下:附录模拟试卷)
[web前端开发技术储久良第三版答案整理(下:附录模拟试卷)_诗和远方_弈心博客](https://www.yixzm.cn/blog/369.html) [web前端开发技术储久良第三版答案整理(中:10-17章)_诗和远方_弈心博客](https://www.yixzm.cn/blog/368.html) [web前端开发技术储久良第三版答案整理(上:1-9章)_诗和远方_弈心博客](ht
7589

Web前端开发工程师面试(2020-9-15 面试笔试题目及回答思路指南)
面试题来自某互联网独角兽公司的前端开发工程师岗位面试记录,刚打听到的还很新鲜。 面试官和面试者小编都挺熟悉,所以内容具备一定参考价值。 面试中夹杂笔试,整个过程流程大体如下: ### 1 Q:简单做下自我介绍 A:这里是在问前端技术路线、技术面、技术成长规划,别有的没的讲一堆废话。 ### 2 Q:离职原因是什么? A:这里是问你,哪些原因会导致你离职?你工作的不稳定因素有哪些?你
1850

Web前端开发工程师笔试题(2019-3-28 整理16道,含答案)
前端时间因工作需要,整理了一套笔试题。 网上有许多套题,重复的比较多。出于笔试时间考虑,本文摘取16道,包含了CSS基本使用、时间绑定、定时器、存储、ajax和框架原理等内容。 题目偏简单,覆盖知识点勉强算全面。如果有更好的题目,也欢迎补充。 放着这里,希望能给正在准备面试的朋友们带来一点点价值。 ### 1. 一个200x200的div在不同分辨率屏幕上下左右居中,用css实现: di
2409

web前端开发技术储久良第三版答案整理(中:10-17章)
[web前端开发技术储久良第三版答案整理(上:1-9章)](https://www.yixzm.cn/blog/367.html) [web前端开发技术储久良第三版答案整理(中:10-17章)](https://www.yixzm.cn/blog/368.html) [web前端开发技术储久良第三版答案整理(下:附录模拟试卷)](https://www.yixzm.cn/blog/369.h
19226

web前端开发技术储久良第三版答案整理(上:1-9章)
[web前端开发技术储久良第三版答案整理(上:1-9章)](https://www.yixzm.cn/blog/367.html) [web前端开发技术储久良第三版答案整理(中:10-17章)](https://www.yixzm.cn/blog/368.html) [web前端开发技术储久良第三版答案整理(下:附录模拟试卷)](https://www.yixzm.cn/blog/369.
28518

盘点央视94版三国演义刘备的励志语录【二】
“兄弟如手足,妻子如衣服,衣服破了尚可缝,手足断,安可再续?我三人桃园结义,不求同生,但愿同死啊!今虽丢了城池家小,安忍叫兄弟中道而亡?况且徐州本非我有,得何足喜,失何足忧?”“大丈夫行于乱世,当光明磊落,即使处于逆境,也当屈身守分,以行天时。不可与命抗争也!”上一期盘点了刘皇叔出场过的第一集《桃园结义》和第八集《三让徐州》,本期继续收集央视94版三国演义刘备的励志语录。上一期请看盘点央视94版三
5932

世风日下,想听一首曲子好难
前几天,身边朋友逛商城时感慨:“都什么年代了,还有卖MP3的,有人买么?”小编也没多想,随口回了句:”有吧,毕竟更专业,音质也相对更不错。“不想在几天后,一些事情让小编有了新的想法。记得上一次用MP3,已经是十多年前的事情了。那个时候,手机还是只能打电话发短信的功能机,街上还能随处看到网吧。那个时候,像听音乐,得去网吧下载到MP3播放器,然后才能在工作学习的时候有音乐听。记得在那个时候,街上还有商
2233

九型人格在线测试专业版_免费没有广告不用注册
本站的九型人格在线测试永久免费,没有广告,而且不用注册。九型,也称为九型性格、9型人格。本站测试能对九型人格测试结果做分析,测试结果对照图美观清晰。如果九型的测试结果自己看不懂,可以查阅结果下方的测试报告,甚至可以咨询入驻本站的九型解析专家。儿童版(90题)、通用版(144题)和专业版(180题)。以下是测试地址:儿童版(90题)儿童版共90题,题干简单易读,题目精炼,适合理解力、耐心尚未成熟的孩
2659

一代侠医肖汉兴的励志人生
一代侠医肖汉兴的励志人生从医有一人,诞生于中华风雨飘渺之际,父辈给予厚望,故取名汉兴。肖汉兴年幼时聪慧好学,七岁入私塾,原本要走科举之路。但在他十一岁那年,科举废除,于是学医。仅两年后,十三岁的他即可切脉问诊,人称小先生。民国十四年,肖汉兴通过军医考核,成为吴佩孚部军医。民国十六年,吴佩孚北伐战争失败,余部四散。肖汉兴回乡务农。不久,进入马鸿宾部队任上尉军医。亡命江湖民国二十二年,马鸿宾屯垦屯田,
3076

三国演义经典语录盘点
1大丈夫行于乱世,当光明磊落,即使处于逆境,也当屈身守分,以待天时,不可与命争也。2天下有变,则命一上将将荆州之军以向宛、洛,将军身率益州之众出于秦川,百姓孰敢不箪食壶浆以迎将军者乎?诚如是,则霸业可成,汉室可兴矣。3温柔天下去得,刚强寸步难行4今虽死,名可垂于竹帛也!5我乃常山赵子龙也!6燕人张翼德在此,谁敢与我决一死战!7云长,去矣!8不求同年同月同日生,但求同年同月同日死9他十五岁游学四方,
4042

Php开发工程师笔试题(2020-9-23 面试笔试题目及回答思路参考)
面试题来自某互联网独角兽公司的php开发工程师岗位面试记录,刚打听到的还很新鲜。面试官和面试者小编都挺熟悉,所以内容具备一定参考价值。面试中夹杂笔试,整个过程流程大体如下:1Q:简单做下自我介绍A:这里是在问php技术路线、技术面、技术成长规划,别有的没的讲一堆废话。2Q:离职原因是什么?A:这里是问你,哪些原因会导致你离职?你工作的不稳定因素有哪些?你是不是一个喜欢抱怨、甩锅?3Q:php生态理
2059