在vue專案中通過自定義指令，使用canvas特性生成base64格式的檔案，並將其設定為背景，從而實現頁面或元件區域性水印效果
1、新建directives.js
import vue from 'vue'vue.directive('watermark',(el,binding)=>
addwatermarker(binding.value.text, el, binding.value.font, binding.value.textcolor)
})
2、min.js 引入directives.js （我的directives.js檔案在utils目錄下）
import '@/utils/directives'
3、呼叫指令
如果希望只給某個元件新增水印，可以直接在元件html中呼叫指令
最新vue專案新增水印
在utils資料夾中建立 wartermark.ts 檔案 位置看自己的元件放那，這都行 內容如下 1 use strict 23 const setwatermark str any 910 建立乙個畫布 11 const can document.createelement canvas 12 ...
vue網頁新增水印
水印新增方式 1.新建 watermark.js 內容如下 let watermarkoption let setwatermarkcontent content let ele document.createelement canvas ele.width 250ele.height 150let...
vue自定義指令實現頁面新增水印
最近遇到個給頁面新增水印的需求 之前沒弄過也沒見過這種效果 然後組長還要求我使用指令的方式實現，做到水印內容 樣式基本可配置，說是以後再有這種需求的話就不用再開發了 嗯，道理我都懂，就是有點兒迷茫 先去vue官網看看自定義指令 有了鉤子和鉤子引數，具體的就是怎麼實現水印效果了。這裡採用的是 canv...