vue自定義指令實現頁面新增水印

最近遇到個給頁面新增水印的需求（之前沒弄過也沒見過這種效果），然後組長還要求我使用指令的方式實現，做到水印內容、樣式基本可配置，說是以後再有這種需求的話就不用再開發了（嗯，道理我都懂，就是有點兒迷茫…）

先去vue官網看看自定義指令：

有了鉤子和鉤子引數，具體的就是怎麼實現水印效果了。這裡採用的是 canvas 的方式，具體的：

'use strict'

;exports.__esmodule =
true
;/**
* 自定義指令'v-watermark'
* 可以傳入自定義引數（v-watermark="markobj"），引數（markobj）格式為
* * 引數是可選的，不傳的時候可以直接使用 v-watermark 指令即可
*/// 記錄上一次生成水印的 div 元素 id
let prevdivid =0;
const number180 =
180;
// 生成水印
const
setwatermark
= markobj =>
object.
assign
(defaultobj, markobj)
;// 角度轉成負數
defaultobj.angle =
-math.
abs(defaultobj.angle)
;// 隨機生成乙個 id
const id = math.
random()
;// 清除上次的水印 div[解決：視窗大小調整時（onresize方法）水印會疊加，導致顏色加深的問題]
if(prevdivid && document.
getelementbyid
(prevdivid)
!==null
)// 記錄 id
prevdivid = id;
// 建立畫布
const canvas = document.
createelement
('canvas');
// 設定畫布的長、寬
canvas.width =
240;
canvas.height =
180;
const context = canvas.
getcontext
('2d');
// 旋轉角度（以弧度計）
context.
rotate
((defaultobj.angle*math.pi)
/number180)
; context.font = defaultobj.fontsize +
' 微軟雅黑'
;// 設定填充繪畫的顏色、漸變或者模式
context.fillstyle = defaultobj.color;
context.textalign =
'left'
; context.textbaseline =
'middle'
; context.
filltext
(defaultobj.text,
0, canvas.height)
;const div = document.
createelement
('div');
div.id = prevdivid;
div.style.pointerevents =
'none'
; div.style.position =
'absolute'
; div.style.top = defaultobj.top +
'px'
; div.style.left =
'0px'
; div.style.zindex =
'9999'
; div.style.width = document.documentelement.scrollwidth +
'px'
; div.style.height = document.documentelement.scrollheight +
'px'
; div.style.background =
'url('
+canvas.
todataurl
('image/png')+
') left top repeat'
; document.body.
(div)
;return prevdivid;
}exports.
default=)
;// 監聽視窗變化事件
window.
onresize=(
)=>);
}}// 監聽頁面滾動
window.
onscroll=(
)=>);
}}},
unbind:
function
unbind()
}

vue自定義指令實現v model

指令是vue中非常重要的內容，了解指令的用法可以更好的服務於業務場景，方便高效，本文主要介紹指令的基本概念和用法，簡單模擬v model實現的功能。除了內建指令，vue.js 也允許註冊自定義指令。自定義指令提供一種機制將資料的變化對映為 dom 行為。可以用vue.directive id,def...

Vue自定義指令

vue有很多內建的指令，比如說v on，v model，v clock等等，每乙個指令會完成一定的功能，但是這些內建的指令總會有些侷限性，要是能夠自定義指令就好了 vue的自定義指令分類 全域性指令和區域性指令 vue指令的定義和用法 以全域性指令為例 1.語法 vue.directive 指令id...

vue自定義指令

自定義指令主要有兩種方式。一是在元件裡以directives的選項來自定義指令的內容。這樣的自定義指令是區域性的自定義指令，只在當前的元件裡面才能使用。script export default directives arr arr.join el.style.csstext arr script ...