vue實(shí)現(xiàn)頁(yè)面添加水印效果
最近在做項(xiàng)目的時(shí)候要求給頁(yè)面加上水印效果,廢話不多說(shuō)直接上代碼:
export function watermark(settings) {
debugger;
//默認(rèn)設(shè)置
var defaultSettings={
watermark_txt:"text",
watermark_x:20,//水印起始位置x軸坐標(biāo)
watermark_y:20,//水印起始位置Y軸坐標(biāo)
watermark_rows:5,//水印行數(shù)
watermark_cols:10,//水印列數(shù)
watermark_x_space:100,//水印x軸間隔
watermark_y_space:100,//水印y軸間隔
watermark_color:'#aaa',//水印字體顏色
watermark_alpha:0.4,//水印透明度
watermark_fontsize:'15px',//水印字體大小
watermark_font:'微軟雅黑',//水印字體
watermark_width:210,//水印寬度
watermark_height:80,//水印長(zhǎng)度
watermark_angle:15//水印傾斜度數(shù)
};
//采用配置項(xiàng)替換默認(rèn)值,作用類似jquery.extend
if(arguments.length===1&&typeof arguments[0] ==="object" )
{
var src=arguments[0]||{};
for(var keyS in src)
{
if(src[keyS]&&defaultSettings[keyS]&&src[keyS]===defaultSettings[keyS])
continue;
else if(src[keyS])
defaultSettings[keyS]=src[keyS];
}
}
var oTemp = document.createDocumentFragment();
//獲取頁(yè)面最大寬度
var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
var cutWidth = page_width*0.0150;
var page_width=page_width-cutWidth;
//獲取頁(yè)面最大高度
var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight)+650;
// var page_height = document.body.scrollHeight+document.body.scrollTop;
//如果將水印列數(shù)設(shè)置為0,或水印列數(shù)設(shè)置過(guò)大,超過(guò)頁(yè)面最大寬度,則重新計(jì)算水印列數(shù)和水印x軸間隔
if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width *defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
defaultSettings.watermark_cols = parseInt((page_width-defaultSettings.watermark_x+defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space) - 1);
defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1) - 10);
}
//如果將水印行數(shù)設(shè)置為0,或水印行數(shù)設(shè)置過(guò)大,超過(guò)頁(yè)面最大長(zhǎng)度,則重新計(jì)算水印行數(shù)和水印y軸間隔
if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {
defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
}
var x;
var y;
for (var i = 0; i < defaultSettings.watermark_rows; i++) {
y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
for (var j = 0; j < defaultSettings.watermark_cols; j++) {
x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
var mask_div = document.createElement('div');
mask_div.id = 'mask_div' + i + j;
mask_div.className = 'mask_div';
mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
//設(shè)置水印div傾斜顯示
mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.visibility = "";
mask_div.style.position = "absolute";
mask_div.style.left = x + 'px';
mask_div.style.top = y + 'px';
mask_div.style.overflow = "hidden";
mask_div.style.zIndex = "9999";
mask_div.style.pointerEvents='none';//pointer-events:none 讓水印不遮擋頁(yè)面的點(diǎn)擊事件
//mask_div.style.border="solid #eee 1px";
mask_div.style.opacity = defaultSettings.watermark_alpha;
mask_div.style.fontSize = defaultSettings.watermark_fontsize;
mask_div.style.fontFamily = defaultSettings.watermark_font;
mask_div.style.color = defaultSettings.watermark_color;
mask_div.style.textAlign = "center";
mask_div.style.width = defaultSettings.watermark_width + 'px';
mask_div.style.height = defaultSettings.watermark_height + 'px';
mask_div.style.display = "block";
oTemp.appendChild(mask_div);
};
};
document.body.appendChild(oTemp);
}
在main.js中把這段代碼寫進(jìn)去,然后在App,vue初始化這個(gè)方法
created() {
let userId = getCookie("userId")
watermark({watermark_txt:userId+" "+timeFormate(new Date())})
}
把想要傳的參數(shù)給這個(gè)方法傳進(jìn)去
最終的實(shí)現(xiàn)效果是

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue實(shí)現(xiàn)頁(yè)面添加滿屏水印和去除水印功能
- vue實(shí)現(xiàn)在頁(yè)面上添加水印的示例代碼
- 在vue3項(xiàng)目中給頁(yè)面添加水印的實(shí)現(xiàn)方法
- vue項(xiàng)目頁(yè)面的打印和下載PDF加loading效果的實(shí)現(xiàn)(加水印)
- vue實(shí)現(xiàn)頁(yè)面添加水印
- Vue使用自定義指令實(shí)現(xiàn)頁(yè)面底部加水印
- Vue實(shí)現(xiàn)頁(yè)面添加水印功能
- vue+watermark-dom實(shí)現(xiàn)頁(yè)面水印效果(示例代碼)
相關(guān)文章
vue登錄路由權(quán)限管理的項(xiàng)目實(shí)踐
在開(kāi)發(fā)Web應(yīng)用程序時(shí),常常需要進(jìn)行登錄驗(yàn)證和權(quán)限管理,本文主要介紹了vue登錄路由權(quán)限管理的項(xiàng)目實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue倒計(jì)時(shí)刷新頁(yè)面不會(huì)從頭開(kāi)始的解決方法
在本篇文章里小編給大家整理的是關(guān)于vue倒計(jì)時(shí)刷新頁(yè)面不會(huì)從頭開(kāi)始的解決方法,需要的朋友們參考下。2020-03-03
vue-cli如何快速構(gòu)建vue項(xiàng)目
本篇文章主要介紹了vue-cli如何快速構(gòu)建vue項(xiàng)目,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
Vue組件中常見(jiàn)的props默認(rèn)值陷阱問(wèn)題
這篇文章主要介紹了避免Vue組件中常見(jiàn)的props默認(rèn)值陷阱,本文通過(guò)問(wèn)題展示及解決方案給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
Vue?Router4路由導(dǎo)航守衛(wèi)實(shí)例全面解析
這篇文章主要為大家介紹了Vue?Router4路由導(dǎo)航守衛(wèi)實(shí)例全面解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue組件實(shí)現(xiàn)首次加載就觸發(fā)watch
這篇文章主要介紹了vue組件實(shí)現(xiàn)首次加載就觸發(fā)watch方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07

